如何修复未显示的图标（FontAwesome）

Question

我想显示的图标没有出现。

我安装了 FontAwesome，如本页所示：https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs

我也重新安装了。

<font-awesome-icon 
    icon="spinner" 
    class="fas fa-spinner fa-spin fa-3x fa-fw">
</font-awesome-icon>

<span class="sr-only">Loading...</span>

显示以下错误信息：

找不到一个或多个图标 {prefix: "fas", iconName: "spinner"}

不显示图标。

Answer 1

您很可能没有将图标从@fortawesome/fontawesome-svg-core 包中添加到library 以供组件使用。

import Vue from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faSpinner } from "@fortawesome/free-solid-svg-icons";

Vue.component("font-awesome-icon", FontAwesomeIcon);

library.add(faSpinner);

一旦你这样做了，就不需要再指定类了。因此，如果您需要一个与spins、3x 一样大且具有fixed-width 的微调器图标，则应改为执行以下操作。

<font-awesome-icon 
  icon="spinner" 
  size="3x" 
  spin fixed-width>
</font-awesome-icon>

---

参考：

https://github.com/FortAwesome/vue-fontawesome#basic