fontawesome 错误 "Could not find one or more icon"

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, faWhosebug, faGithub } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

...

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

...

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

得到：

Could not find one or more icon(s) {prefix: "fas", iconName: "twitter"}

Answer 1

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

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

未指定时，fas prefix is assumed.

代码沙箱：https://codesandbox.io/s/6j833qp57k

Answer 2

我必须深入研究 linked sandbox 才能找到我正在寻找的答案。

<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>

fontawesome 错误 "Could not find one or more icon"

fontawesome error "Could not find one or more icon"

font-awesome

vue.js

vuepress