Introduction à la méthode d'utilisation d'iconfont dans layui

Les icônes de Layui sont extraites de la bibliothèque d'icônes vectorielles d'Alibaba Iconfont De même, ce didacticiel est également développé en fonction d'Iconfont.

La première étape consiste à ouvrir http://iconfont.cn/ via le navigateur et à accéder à la bibliothèque d'icônes vectorielles Alibaba.

La deuxième étape consiste à autoriser la connexion à un compte via l'icône d'utilisateur dans le coin supérieur droit. Ici, je choisis d'utiliser Github comme compte de connexion.

La troisième étape, une fois la connexion terminée, comprenons un peu les opérations de base.

Iconont fournit de nombreuses bibliothèques d'icônes, y compris des ressources d'icônes officielles et certains documents tiers. Il existe différentes façons de choisir et vous pouvez intégrer des icônes colorées dans le projet. Ici, nous choisissons les « Icônes d'affaires financières multicolores » dans la « Bibliothèque d'icônes colorées » comme cas.

Grâce au fonctionnement du panneau, nous pouvons facilement collecter/télécharger diverses icônes, et nous pouvons également ajouter ces icônes à un projet comme « ajouter au panier ».

Mettez toutes les icônes consultées dans le panier et créez un article.

La quatrième étape, après avoir ajouté un projet, familiarisons-nous avec la gestion et le fonctionnement du projet

Définissez les informations du projet et modifiez le préfixe FontClass de l'icône en "layui-extend- "

Voici le rendu après modification et sauvegarde.

La cinquième étape consiste à choisir la méthode d'intégration.

Iconfont propose deux méthodes d'intégration. L'une consiste à intégrer en générant des ressources CDN en ligne. L'avantage est qu'il est très pratique à maintenir. Un projet aura une adresse unique qui restera inchangée. Une fois l'entrepôt mis à jour, il pourra être directement référencé et le problème de mise à jour sera ignoré. Une autre méthode consiste à télécharger vers l'intégration locale, ce qui présente l'avantage de garantir l'intégrité de l'ensemble du projet et de conserver les différentes versions.

Après avoir cliqué sur le bouton Télécharger localement, nous avons obtenu un package ZIP. Téléchargez la dernière version du framework depuis le site officiel de layui. Après avoir décompressé les deux, placez-les dans le même répertoire. La structure des répertoires est la suivante.

La sixième étape consiste à créer un nouveau répertoire nommé layui-icon-extend sous css/modules dans le répertoire layui et à y copier les fichiers commençant par iconfont dans le répertoire des polices.

Étape 7, commencez à écrire du code ! ! !

Citez le fichier iconfont.css sous layui-icon-extend dans la référence de la page, puis vous pouvez utiliser "iconfont layui-extend-xxxx" pour référencer l'icône.

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1553749761811'); /* IE9 */
  src: url('iconfont.eot?t=1553749761811#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPcAAsAAAAACAAAAAOPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqEBINEATYCJAMICwYABCAFhG0HNRvvBhEVnOnIfhS4sRt8yq+yZN7K03rKOQgeeDvr/UHwJ1pMFmJ1lMvkoIUumZNUihXZXcUECIhbnPNI6jrqciRnTx5926UDzjISRlzIC/n/OWa6FM8PNJfsoL0BjlsH2HEdwncgB+b3GBto93MeApAkKyQ6dOoxAAcaxjQBiBlTJ4/FkZKj1aQKHAhsJWs1RD06DmWNcgeo839ffKM8ByjoKkZGn0kdJ9Dmo25GqIH/ASNcBIzxtAC3CVSgEGggBpTqe6GG/kIqUvFrpGNdqQI+6v//u/TV/uOBAGHDSHYBkIj0c2LYzFMtUADQOPf+s8DTXt8JutvlWuaZXJVliY1X116ODZj7BhtVVjAs5dp1gdDwJ08GPH068Pnzwc+ejVx70D+o24YkQk8GRPvT82JEMKHLgHX7ZTi4L2awZR0gwn4ZPiisqg2mUWWKYIxsrRHhvcELVB2AkGlsytkbH9wUkx+2zJZGaysUnRvawPrMPXGGNdB+h4xQYHc0gf1ShsAyDGtTlZnKiJbrohkYMq2cPYFhe++ksm4td/CLnff+HUmv2hblmthsoitqW5WcWyzvRN2RbkZqyhXt92/tiklBqsOO90g46U13m0c37xetszOm9IpNTbUp/jWzW6ef32wedad768020n9Gbzcgz+esH/Gg3CPNaJhja6u48j3edM8w2cbcDgjvvbfH7iwotLtv7/nn/1x4IPPAwpeD/+257bYXFuyM3S6HeYeh4RxPvktpaxtRH21KT/kDyHL6BuS10/1n8MHvPMdv5beOSRzQxmzjTxxots6/RRsA/t9Ur6pt/uff4Jobc2y0t8Uvh6EB8OLmEkGs/29qtDOC464NAv4eo2WdprIMhaLJjNKwwln0t1IikcB/qDnSy75GE7FW4OAZCAp2kkDFQSZSwxaCjkEl2HDQGiQFOm82iDIPFaE5gXwrAAQ+x0DBwzVQ8RF8kRPsD6aO/jBzaAwrn6L2XDsVrtoTCkYPZA+hyjNtqXgVpD7QrxNBSZaP+yBVoQtsw8qG7pghjbGganyHWYOmPIUbXAyTJIeC8ggVGwFz4ZqmLnsjQ+XpYOWMIIEhD5B6IKTkMtptzla5n39AvlpCoJqaCvkHIpVwcGAzWC2Qd37WquZaHlJp+ByMaUAjuRS4gRYlpj8HivJREaQwQ9DDW3CZpJFuyzfmF6ZPtwWQDImSOURlfY1dKLKjlw0GAA==') format('woff2'),
  url('iconfont.woff?t=1553749761811') format('woff'),
  url('iconfont.ttf?t=1553749761811') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1553749761811#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.layui-extend-quexianicon:before {
  content: "\e605";
}

Dans le style ci-dessus, iconfont fait référence au nom du style dans iconfont.css.
Pour éviter les conflits, la modification n'est généralement pas recommandée. Bien entendu, si vous référencez plus de projets sur iconfont, vous pouvez également le modifier.

Remarque : Ne le remplacez pas par layui-icon, cela entrerait en conflit avec l'icône fournie avec layui ! !

Pour plus de connaissances sur Layui, veuillez faire attention à la colonne Tutoriel d'utilisation de Layui.

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!