fontawesome 错误“找不到一个或多个图标”

Posted 2023-02-22

【中文标题】fontawesome 错误“找不到一个或多个图标”

【英文标题】：fontawesome error "Could not find one or more icon"

【发布时间】：2018-12-14 21:04:09

【问题描述】：

我关注了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, fa***, faGithub  from '@fortawesome/free-brands-svg-icons'
import  FontAwesomeIcon  from '@fortawesome/vue-fontawesome'

...

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

...

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

得到：

找不到一个或多个图标 prefix: "fas", iconName: "twitter"

【参考方案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

【讨论】：

这是一个正确的答案。除了有 一些 文档描述了这一点。从版本 4 升级：fontawesome.com/how-to-use/on-the-web/setup/…。这描述了与 Font Awesome 5 的任何使用相关的各种样式前缀。vue-fontawesome 上的 README 讨论了用于指定除默认 fas 之外的前缀的 Vue 语法。这里：github.com/FortAwesome/vue-fontawesome#the-icon-property 和这里：github.com/FortAwesome/…

有没有办法全局设置前缀？例如，我从不固定 - 我总是使用 fal，但我不想在每个图标行上都键入它。