具有Vuetify的FontAwesome-如何在v-icon组件中包含Font Awesome图标

vue.js Vue.js

伽罗理查德

2020-03-19

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

My bare basics 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')

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

My Component.vue:

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

^ Where I have left out superfluous code*.

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...

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.

第2408篇《具有Vuetify的FontAwesome-如何在v-icon组件中包含Font Awesome图标》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android