问题

I want to use Fontawesome 5 Icons with VuetifyJs. Is that possible? which npm package for fontawesome should I use? because no one worked for me. It is really confusing for me as an inexperienced VuetifyJs developer to use it, with the lack of any clear steps in the documentation of VuetifyJs.

回答1:

From docs:

Font Awesome is also supported. Simply use the fa- prefixed icon name. Please note that you still need to include the Font Awesome icons in your project.

Release notes:

Things we added

v-icon now supports FontAwesome 5

You probably just need to include it in your index.html inside <head> or so

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

Then use like <v-icon>fa-search</v-icon>

回答2:

To bring across my Vue specific answer, to get Font Awesome 5 working with Vuetify.js I needed the following setup in main.js:

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)

Then I use the imported icon on the template level:

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

回答3:

Install

yarn add --dev @fortawesome/fontawesome-free
// or
npm i --save-dev @fortawesome/fontawesome-free

Import

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

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

Use

<v-icon>fas fa-lock</v-icon>

来源：https://stackoverflow.com/questions/48783624/fontawesome-5-with-vuetifyjs-1-0-0

标签

font-awesome

vuetify.js

Fontawesome 5 with VuetifyJs 1.0.0

问题

回答1:

回答2:

回答3:

Install

Import

Use