我正在使用 Webpack + Vue + vue-fontawesome。
下面的代码工作正常并显示图标。
import @fortawesome/free-solid-svg-icons
但是这个不显示图标。
import faCalendarCheck component in @fortawesome/free-regular-svg-icons
类似的,@fortawesome/free-regular-svg-icons
中的其他组件不工作。
组件渲染 HTML 注释行 <\!---->
.
为什么@fortawesome/free-regular-svg-icons 不起作用?
main.js
// Font Awesome
import { library } from '@fortawesome/fontawesome-svg-core';
import {
faThLarge,
// faCalendarCheck,
faBell,
faAddressBook,
faCalculator,
faSitemap,
faEnvelope,
faWindowMaximize,
faFileAlt,
faNewspaper,
} from '@fortawesome/free-solid-svg-icons';
import {
faCalendarCheck,
} from '@fortawesome/free-regular-svg-icons';
library.add(faThLarge);
library.add(faCalendarCheck);
library.add(faBell);
library.add(faAddressBook);
library.add(faCalculator);
library.add(faSitemap);
library.add(faEnvelope);
library.add(faWindowMaximize);
library.add(faFileAlt);
library.add(faNewspaper);
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
Vue.component('font-awesome-icon', FontAwesomeIcon);
app.vue
<template>
<font-awesome-icon icon="calendar-check" />
</template>
package.json
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.2",
"@fortawesome/free-brands-svg-icons": "^5.2.0",
"@fortawesome/free-regular-svg-icons": "^5.2.0",
"@fortawesome/free-solid-svg-icons": "^5.2.0",
"@fortawesome/vue-fontawesome": "^0.1.1"
}
最佳答案
使用非实体图标需要指定前缀。
在您的示例中,这应该有效:
<font-awesome-icon :icon="['far', 'calendar-check']" />
可以找到更多信息 here .
关于vue.js - vue-fontawesome 的 free-regular-svg-icons 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51996899/