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
.