VueJS 和在 CSS 中使用 fontawesome 图标答案

【问题标题】：VueJS and using fontawesome icons in CSSVueJS 和在 CSS 中使用 fontawesome 图标
【发布时间】：2021-02-11 10:30:06
【问题描述】：

我一直在我的 vueJS ("vue": "~2.6.11") 应用程序组件的 CSS 中使用 font awesome 图标。

您能帮我解决以下问题吗？

th.sortable::after {
    font-family: "FontAwesome";
    content: "\f0dc";
    position: absolute;
    left: 10px;
    color: #999;
}

我已经按照这些步骤在我的 Vue 应用中安装了 font awesome。

yarn add @fortawesome/vue-fontawesome -D
yarn add @fortawesome/fontawesome-svg-core -D

在 main.js 我有以下代码：

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';

Vue.component('font-awesome-icon', FontAwesomeIcon)

但这对我不起作用，如果我直接提供 CDN URL (<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>") of font awesome in index.html 它可以工作。我可以看到排序图标。

【问题讨论】：

标签： vue.js font-awesome

【解决方案1】：

在您的 main.js 中，您是否在 import 之后添加了这一行： Vue.component('font-awesome-icon', FontAwesomeIcon)

【讨论】：

是的，我做到了，请参见主线程
确实，这个操作创建了全局组件<font-awesome-icon />
在这里，您尝试在样式部分使用 FontAwesome，就像样式表一样，这就是 CDN 链接起作用的原因！
我没找到你？你能详细说明这里缺少什么吗？

【解决方案2】：

使用 npm/yarn 安装 font-awesome
```
> npm install font-awesome
```

在您的 main.js 脚本中，添加

import 'font-awesome/scss/font-awesome.scss'

在组件中使用：
```
   <i class="fa fa-dashboard"></i>
```

【讨论】：