Comment implémenter de petites icônes en utilisant Font Awesome via Vue.js

Cet article présente principalement comment utiliser les petites icônes de Font Awesome dans Vue.js. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

• <.>1. Installez Font Awesome

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome

• 2. Configuration (dans le fichier src/main.js), plusieurs modules importés et modules chargés doivent être installés. be Notez qu'il ne peut être utilisé dans le projet qu'après avoir été introduit. Cet exemple présente uniquement l'utilisation du café

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCoffee)

Vue.component('font-awesome-icon', FontAwesomeIcon)

• Utilisation (dans n'importe quel fichier vue)

<template>
  <p id="app">
    <font-awesome-icon icon="coffee" />
    <router-view/>
  </p>
</template>

• 4. Image d'effet (petites icônes visibles dans la zone rouge)

  
  

Éléments de base de la validation du formulaire d'élément dans Vue

Lecteur de musique Web mobile basé sur Vue Implémentation de

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!