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屋!