Utilisation d'icônes monochromes
1. Téléchargez d'abord l'icône sélectionnée dans le
fichier local 2. Ajoutez le fichier iconfont.css et le fichier avec le suffixe .eot .ttf .woff .svg dans le dossier du projet
3. Importez iconfont dans le fichier main.js du projet. fichier de style css,
import "./assets/styles/iconfont.css"
4. Notez que dans le fichier iconfont.css, modifiez les chemins des quatre autres fichiers référencés en fonction de votre propre situation, sinon une erreur sera signalée.
5. L'étape suivante consiste à l'utiliser dans le projet. L'icône monochrome directement utilise le code uniCode correspondant à l'icône, et ajoute le nom de la classe iconfont étiquette est très bien
Utilisation d'icônes de couleur
1. Téléchargez également l'icône sélectionnée dans le
fichier local 2. Ajoutez les cinq fichiers utilisés par l'icône monochrome et le fichier iconfont.js dans le dossier du projet en même temps, et importez iconfont.js en fonction du chemin dans main. js
import "./assets/styles/iconfont.css"
import "@/assets/iconfont/iconfont.js"
3. Ajoutez le code suivant à APP.vue
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
4. Comment utiliser: Écrivez
le code correspondant à l' icône multicolore là où vous en avez besoin, vous pouvez le voir dans index.html dans le dossier téléchargé
