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”} {}

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'

fontawesome与vue不起作用

4 个答案: