Maison > interface Web > Tutoriel Layui > le corps du texte

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

Libérer: 2019-12-26 16:46:13
avant
4062 Les gens l'ont consulté

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.

Introduction à la méthode dutilisation diconfont dans layui

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.

Introduction à la méthode dutilisation diconfont dans layui

@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";
}
Copier après la connexion

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!

Étiquettes associées:
source:cnblogs.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal