字体图标错误 "找不到一个或多个图标"

Question

我遵循了https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs。

但是当像这样使用它时：

import { library } from '@fortawesome/fontawesome-svg-core'
import { faBars } from '@fortawesome/free-solid-svg-icons'
import { faTwitter, faFacebook, faStackOverflow, faGithub } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

...

library.add(faBars, faTwitter, faFacebook, faStackOverflow, faGithub )
Vue.component('font-awesome-icon', FontAwesomeIcon)

...

<font-awesome-icon icon="twitter" class="icon alt"/>

收到：

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

- JustWe

Answer 1

free-brands-svg-icons 使用 fab 前缀（文档似乎没有提到这一点，必须检查其在 node_modules 文件夹中的位置），您需要指定它：

<font-awesome-icon :icon="['fab', 'twitter']" class="icon alt"/>

当未指定时，假定使用 fas 前缀。

CodeSandbox: https://codesandbox.io/s/6j833qp57k

- yuriy636

---

这是一个正确的答案，除了有一些文件描述了这个。从版本4升级：https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4 。其中描述了各种样式前缀——与使用Font Awesome 5相关。vue-fontawesome 的 README讨论了指定除默认的 fas 以外的前缀的Vue语法。在这里：https://github.com/FortAwesome/vue-fontawesome#the-icon-property 和 在这里：https://github.com/FortAwesome/vue-fontawesome#why-so-explicit-the-iconfar-coffee-syntax - mwilkerson

有没有一种方法可以全局设置前缀？例如，我从不使用 solid，我总是使用 fal，但我不想在每个图标行上都输入它。 - Luke Brown

Answer 2

我不得不深入链接的沙盒中寻找我要找的答案。

<template>
...
   <!-- For "normal" icons, do not use the prefix -->
   <font-awesome-icon icon='bars' />

   <!-- For "brands", use more verbose prop definition -->
   <font-awesome-icon :icon="['fab', 'fab-twitter']" />
...
</template>

- T.Woody

---

你打错了，应该是：<font-awesome-icon :icon="['fab', 'fab-twitter']" />。 - Jamaluddin Rumi