Je souhaite utiliser les icônes de Fontawesome 5 avec VuetifyJs. Est-ce possible ? quel paquet npm pour Fontawesome dois-je utiliser ? car aucun n'a fonctionné pour moi. C'est vraiment déroutant pour moi en tant que développeur inexpérimenté de VuetifyJs de l'utiliser, avec le manque d'étapes claires dans la documentation de VuetifyJs.
Réponses
Trop de publicités?
En docs :
Font Awesome est également pris en charge. Il suffit d'utiliser le fa- préfixé i Veuillez noter que vous devez toujours inclure le F votre projet .
Les choses que nous avons ajoutées
La v-icon prend désormais en charge FontAwesome 5
Vous avez probablement juste besoin de l'inclure dans votre index.html à l'intérieur de <head> environ
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
Puis utiliser comme <v-icon>fa-search</v-icon>
Utilisateur non enregistré
Points
0
Pour faire passer mon Vue réponse spécifique, pour faire fonctionner Font Awesome 5 avec Vuetify.js J'avais besoin de la configuration suivante dans 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)J'utilise ensuite l'icône importée au niveau du modèle :
<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>
EchoCow
Points
37
Installer
yarn add --dev @fortawesome/fontawesome-free
// or
npm i --save-dev @fortawesome/fontawesome-freeImportation
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import '@fortawesome/fontawesome-free/css/all.css'
Vue.use(Vuetify, {
iconfont: 'fa'
})Utilisez
<v-icon>fas fa-lock</v-icon>
