vue.js - 带有Vuetify的vue.js FontAwesome如何在v icon 组件中包含 Font Awesome 图标

  显示原文与译文双语对照的内容

希望有人知道我在哪里出错了- 我正在尝试用Vuetify实现 Font Awesome 包。 Font Awesome全部导入并准备就绪(设置与我成功集成Font Awesome的项目一致):

main.js file:的基础知识


import '@babel/polyfill'


import Vue from 'vue'


import './plugins/vuetify'


import App from './App.vue'


import store from './store'


import './registerServiceWorker'



import { library } from '@fortawesome/fontawesome-svg-core'


import { faCode } from '@fortawesome/pro-solid-svg-icons'


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



library.add(faCode)



Vue.component('font-awesome-icon', FontAwesomeIcon)



Vue.config.productionTip = false



new Vue({


 store,


 render: h => h(App)


}).$mount('#app')



在组件中,我引用的是 icon,如下所示:

我的Component.vue:


<template>


. . .


 <v-btn>


 <v-icon>fas fa-code</v-icon>


 </v-btn>


. . .


</template>



^ 在那里我遗漏了多余的code* 。

所以,我的问题是 - 我们如何在Vuetify 的v-icon组件中集成Font Awesome?

作为参考,我使用下面概述的内容:

https://vuetifyjs.com/en/components/icons

这与我上面的指定相同,但遗憾的是我的图标没有显示......

Update更新 我特别想要一个不包含 heavy Font Awesome all.css 文件的解决方案( <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> ) - 相反,只需要在 icon 上导入 icon 。 ( 缩小 all.css 文件的总体大小为 v.5.2.0的52kb 。

时间:

对于 nuxt/vuetify项目:

通过在Vuetify配置文件中创建它,还可以在项目安装插件"plugins/vuetify.js" 中设置它,添加"iconfont":


import '@fortawesome/fontawesome-free/css/all.css'//Ensure you are using css-loader


import Vue from 'vue'


import Vuetify from 'vuetify'



Vue.use(Vuetify, {


 iconfont: 'fa'


})

现在,像这样使用 icon 组件:

<v-icon>fab fa-vuejs</v-icon>
...