Question

当我在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']" />

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

Answer 1

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

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

Answer 2

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

您需要使用：

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

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

library.add(faUser);

然后在组件中使用字体：

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

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

2 个答案: