免费-常规-svg-vue的图标-字体无法正常工作

xdyibdwo  于 2023-02-05  发布在  Vue.js
关注(0)|答案(2)|浏览(120)

我正在使用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无法正常工作?

    • 主文件. 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);
    • 应用程序版本**
<template>
    <font-awesome-icon icon="calendar-check" />
</template>
    • 包. 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"
}
xfb7svmp

xfb7svmp1#

您需要指定使用非实心图标的前缀。
在您的示例中,这应该是可行的:

<font-awesome-icon :icon="['far', 'calendar-check']" />

更多信息可以在这里找到。

e3bfsja2

e3bfsja22#

还有一个建议--不要这样写:

library.add(faThLarge);
library.add(faCalendarCheck);
library.add(faBell);
etc...

您可以将其简化为:

library.add(faThLarge, faCalendarCheck, faBell);

相关问题