web-dev-qa-db-fra.com

Fontawesome 5 avec VuetifyJs 1.0.0

Je souhaite utiliser Fontawesome 5 Icons avec VuetifyJs. Est-ce possible? quel paquet npm pour fontawesome dois-je utiliser? parce que personne ne travaillait pour moi ... Il est vraiment déroutant pour moi, en tant que développeur inexpérimenté de VuetifyJs, de l’utiliser, faute d’une procédure claire dans la documentation de VuetifyJs.

font-awesomevuetify.js
5
Nafaa Boutefer

De docs :

Font Awesome est également supporté. Utilisez simplement le nom de l'icône précédé de fa- . Veuillez noter que vous devez toujours inclure les icônes Font Awesome dans votre projet.

Notes de version :

Choses que nous avons ajoutées 

v-icon supporte maintenant FontAwesome 5

Vous avez probablement juste besoin de l'inclure dans votre index.html à l'intérieur de <head> ou plus

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

Puis utilisez comme <v-icon>fa-search</v-icon>

9
Traxo

Pour apporter ma réponse Vue spécifique, pour que Font Awesome 5 fonctionne 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)

Ensuite, j'utilise 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>
2
user10261970

Installer

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

Importation

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

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

Utilisation

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