Vue.js FontAwesome与Vuetify-如何在v-icon组件中包含字体Awesome图标

希望有人知道我在这里哪里出了问题-我正在尝试用Vuetify实现字体很棒的软件包。Font Awesome已全部导入并准备就绪（安装程序与我已成功集成Font Awesome的项目一致）：

我的基本知识

main.js

文件：

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')

在一个组件中，我引用了一个图标，如下所示：

我的

组件.vue

：

<template>
    ...
    <v-btn>
        <v-icon>fas fa-code</v-icon>
    </v-btn>
    ...
</template>

...
fas fa代码
...

^我省略了多余的代码*

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

作为参考，我使用了这里概述的内容：

这和我上面所说的是一样的，但遗憾的是我的图标没有显示出来

---

更新：我特别想要一个解决方案，它不包括添加相当沉重的字体Awesome

all.css文件（
），而是根据需要在图标上导入。（缩小后的all.css文件在
v.5.2.0
中的总重量为52kb，好吧，因此根据上述评论员的建议，我已经通过使用标准的
vue font awesome
方法，包括字体awesome图标组件，将
弹出，以便我在问题中使用：

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


fas fa代码

…变成：

<v-btn fab dark small color="black" v-on:click="addCodeBlock">
   <font-awesome-icon :icon="['fas', 'code']"/>
</v-btn>

在Vuetify的框架选项下发布了一个简单的解决方案：

使用NPM或Thread安装图标库：

npm install @fortawesome/fontawesome-free -D

配置-用于简单的vue项目
将此添加到main.js

import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
 iconfont: 'fa'
})

配置-用于nuxt+vuetify项目
在插件下创建一个js文件（例如icons.js）

import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  iconfont: 'fa'
})

将其添加到nuxt.config.js中的插件中

{ src: '~/plugins/icons.js', ssr:false }

用法
现在，您可以使用v-icon或在组件中附加/前置来访问字体图标，如：

<v-slider
v-model="energy"
color="red"
label="Energy"
min="1"
max="100"
thumb-label="always"
prepend-icon="fa-burn"
></v-slider>


对于Nuxt/Vuetify项目：
作为对上述答案的补充，您还可以在Vuetify配置文件中进行设置，该文件是在项目安装过程中创建的（“plugins/Vuetify.js”），并添加“icont”属性：


import'@fortawesome/fontawesome free/css/all.css'//确保您正在使用css加载器
从“Vue”导入Vue
从“Vuetify”导入Vuetify
Vue.use（Vuetify{
ICont:‘fa’
})
在src/main.js中导入字体：

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import 'font-awesome/css/font-awesome.css'

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

然后在src/plugins/vuetify.js中定义icont

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'fa4' // 'md' || 'mdi' || 'fa' || 'fa4'
})

你可以用。
由于您正在寻找一个避免将所有图标加载到vue/vuetify的选项，因此我建议您使用摇树方法，手动添加每个要使用的图标。这可能有点繁琐，但按需添加图标从长远来看是有益的，因为webpack只会捆绑您指定的图标

请注意：

在本教程中，我假设读者拥有Pro软件包。如果你只想使用免费软件包，只需从混音中删除任何类似Pro的东西即可

在下面，您可以看到我使用vuetify并使用带有v-icon和v-text/v-html的SVG执行此操作的首选方法：

首先，我们必须安装图标：

（打开项目内的终端/命令提示符并安装）

$npm i--save@fortwomesome/fontwomesome svg core//这是svg核心，它是必需的。
$npm i--保存@fortawesome/vue fontawesome//vue集成*
$npm i--保存@fortawesome/免费品牌svg图标//品牌图标
$npm i--保存@fortawesome/free常规svg图标//仅适用于FA5免费**
$npm i--保存@fortawesome/free实心svg图标//仅适用于FA5免费**
$npm i--保存@fortawesome/pro常规svg图标//pro图标常规类型
$npm i--保存@fortawesome/pro light svg icons//pro icons light type
$npm i--保存@fortawesome/pro solid svg图标//pro solid图标类型
$npm i--保存@fortawesome/pro duotone svg图标//pro图标duotone类型***

（*）vue集成包
（**）仅适用于免费图标，如果您拥有Pro并按照说明操作，则这些图标已包含在Pro中
（***）在撰写本文时，duotone图标尚未完全集成，请注意错误
然后让我们将其添加到vuetify配置中：

在这里，我假设您将vuejs与javascript（而不是typescript）一起使用，并且您已经通过
vue add vuetify
安装了vuetify。
vuetify.js
文件应该位于
src
文件夹中的
plugins
文件夹中

//src/plugins/vuetify.js
从“Vue”导入Vue；
从“Vuetify/lib”导入Vuetify；
从“@fortawesome/fontawesome svg核心”//核心svg导入{library}
从“@fortawesome/vue fontawesome”//集成导入{FontAwesomeIcon}
//…这里应该有更多内容，但请参见下面的下一部分。。。
组件（'font-awesome-icon'，FontAwesomeIcon）//将其添加到Vue
Vue.use（Vuetify）；
导出默认的新Vuetify({
图标：{
iconfont:‘faSvg’，//蜜蜂的膝盖，大多数人都在寻找的东西。
},
});

好的，现在我们已经添加了FontAwesome 5的主要组件，让我们使用树形图来指示我们希望在我们的项目中使用哪些图标。我将只使用两个图标作为示例：
fa plus
和
fa user circle
，我将为我们安装的三个FontAwesome Pro 5软件包（Light、Regular和Duotone）添加它们然后我将为实体添加一些其他的（条和用户），看看如何同时以两种方式完成这项工作

所以回到我们的
vuetify.js
文件，我们替换

/…这里应该有更多内容，但请参见下面的下一部分。。。

具有以下内容（请注意以下情况）：

//src/plugins/vuetify.js
// ...
导入{
法伯斯，
浮士尔
}来自“@fortwome/pro solid svg icons”
进口{
faPlus作为farPlus，
faUserCircle作为faUserCircle
}来自“@fortwome/pro常规svg图标”
进口{
faPlus作为falPlus，
福塞西