fontawesome 与 vue 不工作

Question

有没有办法在 Vue 中安装 fontawesome？我尝试了几个教程，但它们都是无用的并且不起作用或图标为空或插件根本不呈现！！！！我不想通过脚本导入字体，我想在我的应用程序中安装它。我尝试了本教程 ( https://github.com/FortAwesome/vue-fontawesome )，但无论我做什么，图标都不会呈现，也许有人可以指出我的解决方案？

这是我的代码，但图标甚至不呈现：

 import FontAwesomeIcon from '@fortawesome/vue-fontawesome';

export default {
  name: 'App',
  components:{FontAwesomeIcon}
}

<template>
  <div id="app"><font-awesome-icon icon="spinner" /></div>
</template>

另外，我在控制台中收到错误消息：

检查未找到一个或多个图标 {prefix: “fas”, iconName: “spinner”} {}

原文由 user2423718 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为您可能缺少一些依赖项。请试试

<script>
import fontawesome from "@fortawesome/fontawesome";
import brands from "@fortawesome/fontawesome-free-brands";
// import 1 icon if you just need this one. Otherwise you can import the whole module
import faSpinner from "@fortawesome/fontawesome-free-solid/faSpinner";
import FontAwesomeIcon from "@fortawesome/vue-fontawesome";

fontawesome.library.add(brands, faSpinner);
// or .add(brands, solid) if you need the whole solid style icons library/module

export default {
  name: "App",
  components: {
    FontAwesomeIcon
  }
};
</script>

工作示例： https ://codesandbox.io/s/ov6o0xk23y

原文由 Arielle Nguyen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

此外，如果您使用多个图标，则可以更轻松地导入和加载整组图标，例如

...
import { fas } from "@fortawesome/free-solid-svg-icons";

library.add(fas);
...

原文由 Doreen Chemweno 发布，翻译遵循 CC BY-SA 4.0 许可协议