Fontawesome 未加载 vue 2答案

【问题标题】：Fontawesome not loading for vue 2Fontawesome 未加载 vue 2
【发布时间】：2022-01-13 19:13:33
【问题描述】：

下面我粘贴了我的代码以根据文档显示依赖项，以及我的 main.js 中的导入。最后，我尝试了很多不同的方式来使用我的 Footer.vue 组件中的图标，但它们没有显示出来。在浏览器中检查元素时，它们显示为，我找不到解决方案。

我还尝试删除 FontAwesomeIcon 导入周围的括号，但没有任何运气。有谁知道这里可能发生了什么？

package.json

"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/vue-fontawesome": "^2.0.6",
"bootstrap-icons": "^1.7.2",
"vue": "^2.6.11",

main.js

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas);
library.add(far);
library.add(fab);

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

new Vue({
    el: '#app',
    store: store,
    render: h => h(App),
}).$mount('#app');

Footer.vue

<font-awesome-icon :icon="['fas', 'phone']" />
<font-awesome-icon :icon="['fas', 'faPhone']" />
<font-awesome-icon icon="phone" />

【问题讨论】：

我现在没有可以使用的 repo，但建议尝试删除 fas、far 和 fab 周围的括号。这些是从各自的包中导出的包。所以如果你想要整个库，import fas from ... ...但如果你只想要一些图标，import { icon1, icon2 ... } from ...
嘿，我也试过了，但没有任何效果。我也尝试过带括号和不带括号的特定图标，它的作用是一样的。
我无法重现此demo 中的问题。注意Footer.vue 中的第二个用法不正确，因为图标名称没有前缀（即，faPhone 应该是 phone，就像第一个示例用法一样）。
是的，我只是不知道接下来应该尝试什么，因为我觉得我所做的任何事情都会偏离文档所说的内容。我在下面查看了您的示例，并不太明白为什么它没有显示。我现在收到一个警告，我以前没有收到，所以我想有一些进展。尝试<font-awesome-icon :icon="['far', 'phone']"></font-awesome-icon> 时，控制台中的错误告诉我“找不到一个或多个图标”。
那是因为@fortawesome/free-regular-svg-icons does not include the phone icon。该图标仅在 @fortawesome/free-solid-svg-icons 中可用。

标签： javascript vue.js icons

【解决方案1】：

你的 package.json 很好。您在页脚中使用图标的方法首先是正确的：

<font-awesome-icon :icon="['fas', 'phone']" />

（我不知道您是否编造了其他两个标签，或者您是否在文档中看到过它们，但我之前似乎没有以这种方式加载图标 - 我不相信它是有效的）

问题在于您对图标的导入。建议只导入手机并在使用时添加图标，而不是尝试导入所有图标。

import { faPhone } from '@fortawesome/free-solid-svg-icons'
library.add(faPhone)

因为fas, fab and fas 是包含图标的对象，而library.add() 需要一个或多个图标（单独），所以您发送的是一个对象而不是图标作为参数。 The docs 不要证明这是可能的，也许你在别处见过这个例子？

如果要导入同一个图标的多个样式，可以这样：

import { faPhone as fasPhone } from '@fortawesome/free-solid-svg-icons'
import { faPhone as farPhone } from '@fortawesome/free-regular-svg-icons'
library.add(
  fasPhone,
  farPhone
)

【讨论】：

OP 的注册实际上工作正常（见demo）。
单独导入特定图标也不起作用。 fab, fas, far 的导入是我从 fontAwesome 本身获得的，理论上应该导入所有图标。

【解决方案2】：

我实际上找到了一个半答案，我宁愿在全球范围内拥有它们，以便以后可以重新使用它们。但就目前而言，它必须这样做。我在 Footer.vue 文件中本地使用它们，它们按预期工作。

我通过从main.js 中删除导入并直接在Footer.vue 中导入所有内容来做到这一点。

【讨论】：