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>

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

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

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

Answer 2

记得加载您正在使用的每个图标。我的图标没有呈现，因为我忘记了 将它们添加到库中。

模板：

<icon icon="lock" />

JS:

import Vue from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import {
  // import icons here
  faLock,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

import App from './App.vue';

// add icons to library here
library.add(faLock);

Vue.component('icon', FontAwesomeIcon);

Vue.config.productionTip = false;

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

Answer 3

此外，在您使用多个图标的情况下，可以更轻松地导入和加载整套图标，例如

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

Answer 4

我收到以下警告但没有显示图标：

"export 'default' (imported as 'FontAwesomeIcon') was not found in '@fortawesome/vue-fontawesome'

我的解决方案是导入特定部分而不是默认

更改自：

import FontAwesomeIcon from '@fortawesome/vue-fontawesome'

至

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

Answer 5

我遇到了同样的问题：

package.json

    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/vue-fontawesome": "^2.0.2",

依靠以前的一个项目，我将 @fortawesome/vue-fontawesome 升级到 ^3.0.0-4，这为我解决了这个问题。

fontawesome 与 vue 不工作

fontawesome with vue do not work

vue.js

font-awesome-5