vue-fontawesome 的 free-regular-svg-icons 不起作用

Posted 2023-02-23

【中文标题】vue-fontawesome 的 free-regular-svg-icons 不起作用

【英文标题】：free-regular-svg-icons of vue-fontawesome not working

【发布时间】：2019-01-30 11:43:13

【问题描述】：

我正在使用 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 不起作用？

ma​​in.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"

【参考方案1】：

您需要为使用非实体图标指定一个前缀。

在您的示例中，这应该可以：

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

更多信息可以在here找到。