vue.js - fontawesome 与 vue 不工作

标签 vue.js font-awesome-5

有没有办法在 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>

另外,我在控制台中收到一个错误:

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

最佳答案

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

<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

关于vue.js - fontawesome 与 vue 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50053163/

相关文章:

vue.js - 如何重定向到nuxt中的子路由?

javascript - v-carousel 是响应式的,但不是它包含的图像

laravel - 如何从 Axios GET 请求的 url 获取参数?

javascript - VueJS : Swapping Form values of two forms

css - 多色单个图标

java - 使用 Font Awesome 5 SVG 作为 JavaFX 按钮形状

javascript - FontAwesome 5 图标轮廓不对齐

django - Vue.js - 组件方法中未定义 Prop

css - 使用 npm 安装时,Font-awesome 5 无法与 webpack 一起使用

android - Android 中的 Fontawesome 5,3 个文件