当我在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');我是这样使用fontawesome的：
<icon :icon="['fas', 'user']" />但我在控制台出错
3条答案
按热度按时间1hdlvixo1#
用户的图标尚未导入，但咖啡的图标已导入。
您需要用途：
然后，将导入的字体添加到库中，如下所示：
然后在组件中使用字体：
ax6ht2ek2#
更简单的为什么要这样做只是
<icon icon='coffee'>如果您正在尝试
<icon :icon="['fas', 'user']" />-您没有导入'user'图标。该错误通常意味着您正在尝试使用未导入的图标，因此可能会拼写错误。mspsb9vt3#
我一直在努力解决同样的问题，但意外地找到了解决方案。
我还发现，通常的方法在某些情况下不起作用。例如，我正在寻找
fa-location-dot图标，同样的事情发生在我身上。因此，如下图所示，在Font Awesome's icon detail modal的左下角，有一个
Aliases: map-marker-alt（对于本例）。Fonta Awesome Icon selector
所以，我试着将它导入到我的Vue文件中，而不是这个...
......最后用- almost - provided别名解决了它，只做了一个小修改：