Comment ajouter une icône dans Layui

Comment ajouter des icônes dans layui : ouvrez d'abord le site officiel d'iconfont et sélectionnez la bibliothèque d'icônes de police que vous aimez ; puis cliquez sur "Télécharger en local" dans le projet, et copiez enfin le fichier décompressé dans le projet local ; , téléchargez-le localement Introduisez simplement le code html pertinent dans le projet.

Recommandé : "Tutoriel layUI"

Les icônes de police de layui2.0 et des versions précédentes ne peuvent pas répondre aux besoins du projet, dont les icônes proviennent d'Alibaba www.iconfont.cn, j'ai donc enrichi manuellement la bibliothèque d'icônes de polices du projet, qui est enregistrée comme suit.

1. Ajoutez des icônes de police au panier

Ouvrez www.iconfont.cn, sélectionnez la bibliothèque d'icônes de police que vous aimez et ajoutez-la à la "Bibliothèque". (c'est-à-dire l'icône du panier d'achat de polices)), comme indiqué dans l'image ci-dessous

2. Ajoutez l'icône au projet

Cliquez sur l'icône "Panier d'achat". " à droite, puis ajoutez l'icône de police sélectionnée Ajouter au projet. Il est recommandé de créer un nouveau projet pour faciliter une expansion future.

3. Téléchargez et introduisez le code

Dans le projet, cliquez sur "Télécharger en local", puis copiez le fichier décompressé dans le projet local et installez-le localement. introduisez le fichier iconfont.css.

4. Sélectionnez l'icône de police

pour ouvrir le fichier demo_unicode.html dans le navigateur. Suivez les invites du fichier et introduisez le code HTML approprié dans le projet local.
Par exemple, 3

Si c'est layui, par souci de beau style, vous pouvez modifier le code css de iconfont.css comme suit

.iconfont{font-family:"iconfont" !important;
font-style:normal;
-webkit-font-smoothing: antialiased;
display: inline-block;
-webkit-text-stroke-width: 0.2px;
font-size:14px;
transition: all 0.4s linear 0s;-o-transition: all 0.2s linear 0s;-moz-transition: all 0.2s linear 0s;
}

5 . Si vous devez ajouter des icônes de police à l'avenir, répétez les étapes ci-dessus, téléchargez directement le code du projet depuis Alibaba iconfont dans votre région, écrasez le code précédent (sauf iconfont.css), et vous pouvez utiliser la nouvelle icône de police.

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!