fontawesome 与 vue 不起作用 [英] fontawesome with vue do not work

问题描述

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

Is there a way to install fontawesome in Vue? I tried few tutorials but they are all useless and do not work or icons are empty or plugin does not render at all!!!! I don't want to import the font by script, I want to install it in my application. I tried this tutorial (https://github.com/FortAwesome/vue-fontawesome) but whatever I did the icons do not render, maybe someone can point me to the solution?

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

Here is my code but the icons even do not render:

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


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

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

此外，我在控制台中收到错误消息:

also, I get an error in the console:

检查未找到一个或多个图标 {prefix: "fas", iconName:微调器"} {}

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

推荐答案

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

I think you might be missing some dependencies. Please try

<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

这篇关于fontawesome 与 vue 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！