Fontawesome 5在vue js应用程序中找不到一个或多个图标

时间:2018-12-12 13:12:06

标签: vue.js font-awesome-5

当我在Vue Js应用程序中使用Font Awesome 5图标时出现错误:

错误

找不到一个或多个图标

这是我的package.json依赖项:

"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.9",
"@fortawesome/free-solid-svg-icons": "^5.6.0",
"@fortawesome/vue-fontawesome": "^0.1.3",
"bootstrap-vue": "^2.0.0-rc.11",
"vue": "^2.5.17",
"vue-router": "^3.0.2"
},

这是我的main.js:

import Vue from 'vue'
import App from './Main.vue'
import Bootstrap from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(Bootstrap);

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCoffee);
Vue.component('icon', FontAwesomeIcon);

Vue.config.productionTip = false;

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

我正在使用像这样的字体:

<icon :icon="['fas', 'user']" />

但是我在控制台中遇到错误

2 个答案:

答案 0 :(得分:0)

更简单的原因是<class 'NoneType'>

如果您尝试使用<icon icon='coffee'>-您没有导入“用户”图标。该错误通常表示您正在尝试使用未导入的图标,因此例如可能拼写错误。

答案 1 :(得分:0)

用户图标尚未导入,但咖啡图标已导入。

您需要使用:

import { faUser } from '@fortawesome/free-solid-svg-icons'

然后,将导入的字体添加到库中,如下所示:

library.add(faUser);

然后在组件中使用字体:

<icon :icon="['fas', 'user']" />