fontawesome错误"无法找到一个或多个图标"

Jiu*_*Jiu 9 font-awesome vue.js vuepress

我跟着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"/>
Run Code Online (Sandbox Code Playgroud)

拿到:

找不到一个或多个图标{前缀:"fas",iconName:"twitter"}

yur*_*636 24

free-brands-svg-icons使用fab前缀(docs似乎没有提到这一点,必须检查node_modules中的文件夹),你必须指定:

<font-awesome-icon :icon="['fab', 'twitter']" class="icon alt"/>
Run Code Online (Sandbox Code Playgroud)

未指定时,fas假定前缀.

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

  • 这是一个正确的答案.除了有_some_文件描述这个.从版本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-句法 (3认同)