Vuetify的FontAwesome-如何在v-icon组件中包含Font Awesome图标 [英] FontAwesome with Vuetify - How to include Font Awesome icons within the v-icon component

问题描述

希望有人会知道我在哪里出错了-我正在尝试使用Vuetify实现Font Awesome软件包. Font Awesome已全部导入并可以使用(设置与我成功集成了Font Awesome的项目相同)

Hopefully someone will know where I have gone wrong here - I'm trying to implement the Font Awesome package with Vuetify. Font Awesome is all imported and ready to go (setup is indentical to projects which I have Font Awesome successfully integrated):

我的基本知识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')

在组件中，我引用的图标如下:

And within a component I am referencing an icon as follows:

我的Component.vue:

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

^我遗漏了多余的代码*.

^ Where I have left out superfluous code*.

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

So, my question is - how do we integrate Font Awesome within Vuetify's v-icon component?

作为参考，我使用的是此处概述的内容:

For reference, I’m using what is outlined here:

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

与我上面的规定完全相同，但是可惜我的图标没有显示...

Which is identical to what I have prescribed above, but sadly my icon does not display...

更新 :我特别想要一种解决方案，该解决方案不包括添加相当沉重的Font Awesome all.css文件(<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">)-而是导入图标按图标的需要. (在v.5.2.0中，缩小的all.css文件的总重量为52kb.

Update: I specifically want a solution which doesn't include adding the rather heavy Font Awesome all.css file (<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">) - instead importing on an icon by icon need. (the overall weight of the minified all.css file is 52kb in v.5.2.0.

推荐答案

好，因此，使用以上注释者的建议，我设法通过使用标准的vue-font-awesome方法使其工作，包括字体真棒图标组件，切换<v-icon>出于我在问题中使用的方式:

Ok, so using the above commenter's suggestion, I have managed to get it working by using the standard vue-font-awesome method of including font awesome icon components, swopping <v-icon> out for such that what I used in my question:

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

...成为:

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

这篇关于Vuetify的FontAwesome-如何在v-icon组件中包含Font Awesome图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！