Le meilleur didacticiel Bootstrap icône de police (Glyphicons) en 2024, dans ce didacticiel, vous pouvez apprendre Quel est l'icône de la police?,Obtenir l'icône Polices,CSS interprétation des règles,usage,Exemples,icon Font avec la barre de navigation,Exemples,Polices personnalisées icône,liste Icône,
Ce chapitre explique l'icône de police (Glyphicons), et quelques exemples pour comprendre son utilisation. formats de polices bootstrap fournis avec plus de 200 glyphes. Tout d'abord, laissez-nous d'abord comprendre ce qui est l'icône de la police.
Polices icône est une police d'icône utilisée dans le projet Web. Bien que, halfelins Glyphicons besoin d' une licence commerciale, mais vous pouvez basé sur le projet Bootstrap à la libre utilisation de ces icônes.
Afin d'exprimer la gratitude icône auteur, je vous souhaite ajouter des liens GLYPHICONS site pendant l'utilisation.
Nous avons les environnement installé chapitres Télécharger la version 3.x Bootstrap, et de comprendre sa structure de répertoire. Dans lespolicesdes icônes de dossier peuvent trouver la police qui contient ces fichiers qui suit:
règles CSS connexes écrites dans le dossier css dossierbootstrap.cssdist etbootstrap-min.cssdans le fichier.
Cliquez ici pour afficher la liste des polices disponibles icône.
La règle CSS suivante constitue glyphicon classe.
@ Font-face { font-family: 'Glyphicons halfelins'; src: url ( 'fr/ polices / glyphicons-halfelins-regular.eot'); src: url ( 'fr/ #iefix fonts / glyphicons-halfelins-regular.eot?) Format ( «embedded-opentype'), url ( 'fr/ polices / glyphicons-halfelins-regular.woff') Format ( 'woff'), url ( 'fonts / fr/ glyphicons-halfelins-regular.ttf') Format ( 'truetype'), url ( 'fr/ polices / glyphicons-halfelins-regular.svg # glyphicons_halflingsregular') Format ( 'svg'); } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons halfelins'; -webkit-font-lissage: antialiased; font-style: normal; font-weight: normal; line-height: 1; -moz-osx-font-lissage: niveaux de gris; }
Donc, la règle font-face est en fait l'endroit pour trouver glyphicons déclaration font-family et l'emplacement.
classe .glyphicon déclarer un décalage par rapport à la partie supérieure de 1px position relative, rendu comme inline-block, les polices des états, des dispositions font-style et de police-poids est normal, réglez la hauteur de ligne à 1. En outre, l'utilisation de -webkit-font-lissage: lissées et -moz-osx-font-lissage: niveaux de gris; obtenir la cohérence cross-browser.
Ensuite, où
.glyphicon: vide { largeur: 1em; }
glyphicon vide.
Il y a la classe 200, chaque classe d'une icône. Ces classes de format commun est le suivant:
.glyphicon-mot clé: avant { contenu: "HexValue"; }
Par exemple, les icônes des utilisateurs à utiliser, il est classe comme suit:
.glyphicon utilisateur: avant { contenu: "\ E008"; }
Pour utiliser une icône, il suffit d'utiliser le code suivant. S'il vous plaît garder l'espace approprié entre les icônes et le texte.
<Span class = "glyphicon glyphicon-recherche"> </ span>
L'exemple suivant montre comment utiliser l'icône Polices:
Les résultats sont les suivants:
Nous avons vu comment utiliser l'icône Polices, nous voyons comment personnaliser l'icône de police.
Nous allons commencer l'exemple ci-dessus, en changeant la taille de la police, la couleur, et appliquer le texte ombre être icône personnalisée.
Voici le code commence:
<Type de bouton = classe "bouton" = "btn btn-primaire btn-lg"> <Span class = "glyphicon glyphicon utilisateur"> </ span> Utilisateur </ Button>
L'effet est le suivant:
En augmentant ou en diminuant la taille de la police de l'icône, vous pouvez faire apparaître l'icône plus ou moins grande.
<Type de bouton = classe "bouton" = "btn btn-primaire btn-lg" style = "font-size: 60px"> <Span class = "glyphicon glyphicon utilisateur"> </ span> Utilisateur </ Button>
<Type de bouton = classe "bouton" = "btn btn-primaire btn-lg" style = "color: rgb (212, 106, 64);"> <Span class = "glyphicon glyphicon utilisateur"> </ span> Utilisateur </ Button>
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;"> <span class="glyphicon glyphicon-user"></span> User </button>
Cliquez ici pour personnaliser l'icône de police >>
图标 | 类名 | 实例 |
---|---|---|
glyphicon glyphicon-asterisk | 尝试一下 | |
glyphicon glyphicon-plus | 尝试一下 | |
glyphicon glyphicon-minus | 尝试一下 | |
glyphicon glyphicon-euro | 尝试一下 | |
glyphicon glyphicon-cloud | 尝试一下 | |
glyphicon glyphicon-envelope | 尝试一下 | |
glyphicon glyphicon-pencil | 尝试一下 | |
glyphicon glyphicon-glass | 尝试一下 | |
glyphicon glyphicon-music | 尝试一下 | |
glyphicon glyphicon-search | 尝试一下 | |
glyphicon glyphicon-heart | 尝试一下 | |
glyphicon glyphicon-star | 尝试一下 | |
glyphicon glyphicon-star-empty | 尝试一下 | |
glyphicon glyphicon-user | 尝试一下 | |
glyphicon glyphicon-film | 尝试一下 | |
glyphicon glyphicon-th-large | 尝试一下 | |
glyphicon glyphicon-th | 尝试一下 | |
glyphicon glyphicon-th-list | 尝试一下 | |
glyphicon glyphicon-ok | 尝试一下 | |
glyphicon glyphicon-remove | 尝试一下 | |
glyphicon glyphicon-zoom-in | 尝试一下 | |
glyphicon glyphicon-zoom-out | 尝试一下 | |
glyphicon glyphicon-off | 尝试一下 | |
glyphicon glyphicon-signal | 尝试一下 | |
glyphicon glyphicon-cog | 尝试一下 | |
glyphicon glyphicon-trash | 尝试一下 | |
glyphicon glyphicon-home | 尝试一下 | |
glyphicon glyphicon-file | 尝试一下 | |
glyphicon glyphicon-time | 尝试一下 | |
glyphicon glyphicon-road | 尝试一下 | |
glyphicon glyphicon-download-alt | 尝试一下 | |
glyphicon glyphicon-download | 尝试一下 | |
glyphicon glyphicon-upload | 尝试一下 | |
glyphicon glyphicon-inbox | 尝试一下 | |
glyphicon glyphicon-play-circle | 尝试一下 | |
glyphicon glyphicon-repeat | 尝试一下 | |
glyphicon glyphicon-refresh | 尝试一下 | |
glyphicon glyphicon-list-alt | 尝试一下 | |
glyphicon glyphicon-lock | 尝试一下 | |
glyphicon glyphicon-flag | 尝试一下 | |
glyphicon glyphicon-headphones | 尝试一下 | |
glyphicon glyphicon-volume-off | 尝试一下 | |
glyphicon glyphicon-volume-down | 尝试一下 | |
glyphicon glyphicon-volume-up | 尝试一下 | |
glyphicon glyphicon-qrcode | 尝试一下 | |
glyphicon glyphicon-barcode | 尝试一下 | |
glyphicon glyphicon-tag | 尝试一下 | |
glyphicon glyphicon-tags | 尝试一下 | |
glyphicon glyphicon-book | 尝试一下 | |
glyphicon glyphicon-bookmark | 尝试一下 | |
glyphicon glyphicon-print | 尝试一下 | |
glyphicon glyphicon-camera | 尝试一下 | |
glyphicon glyphicon-font | 尝试一下 | |
glyphicon glyphicon-bold | 尝试一下 | |
glyphicon glyphicon-italic | 尝试一下 | |
glyphicon glyphicon-text-height | 尝试一下 | |
glyphicon glyphicon-text-width | 尝试一下 | |
glyphicon glyphicon-align-left | 尝试一下 | |
glyphicon glyphicon-align-center | 尝试一下 | |
glyphicon glyphicon-align-right | 尝试一下 | |
glyphicon glyphicon-align-justify | 尝试一下 | |
glyphicon glyphicon-list | 尝试一下 | |
glyphicon glyphicon-indent-left | 尝试一下 | |
glyphicon glyphicon-indent-right | 尝试一下 | |
glyphicon glyphicon-facetime-video | 尝试一下 | |
glyphicon glyphicon-picture | 尝试一下 | |
glyphicon glyphicon-map-marker | 尝试一下 | |
glyphicon glyphicon-adjust | 尝试一下 | |
glyphicon glyphicon-tint | 尝试一下 | |
glyphicon glyphicon-edit | 尝试一下 | |
glyphicon glyphicon-share | 尝试一下 | |
glyphicon glyphicon-check | 尝试一下 | |
glyphicon glyphicon-move | 尝试一下 | |
glyphicon glyphicon-step-backward | 尝试一下 | |
glyphicon glyphicon-fast-backward | 尝试一下 | |
glyphicon glyphicon-backward | 尝试一下 | |
glyphicon glyphicon-play | 尝试一下 | |
glyphicon glyphicon-pause | 尝试一下 | |
glyphicon glyphicon-stop | 尝试一下 | |
glyphicon glyphicon-forward | 尝试一下 | |
glyphicon glyphicon-fast-forward | 尝试一下 | |
glyphicon glyphicon-step-forward | 尝试一下 | |
glyphicon glyphicon-eject | 尝试一下 | |
glyphicon glyphicon-chevron-left | 尝试一下 | |
glyphicon glyphicon-chevron-right | 尝试一下 | |
glyphicon glyphicon-plus-sign | 尝试一下 | |
glyphicon glyphicon-minus-sign | 尝试一下 | |
glyphicon glyphicon-remove-sign | 尝试一下 | |
glyphicon glyphicon-ok-sign | 尝试一下 | |
glyphicon glyphicon-question-sign | 尝试一下 | |
glyphicon glyphicon-info-sign | 尝试一下 | |
glyphicon glyphicon-screenshot | 尝试一下 | |
glyphicon glyphicon-remove-circle | 尝试一下 | |
glyphicon glyphicon-ok-circle | 尝试一下 | |
glyphicon glyphicon-ban-circle | 尝试一下 | |
glyphicon glyphicon-arrow-left | 尝试一下 | |
glyphicon glyphicon-arrow-right | 尝试一下 | |
glyphicon glyphicon-arrow-up | 尝试一下 | |
glyphicon glyphicon-arrow-down | 尝试一下 | |
glyphicon glyphicon-share-alt | 尝试一下 | |
glyphicon glyphicon-resize-full | 尝试一下 | |
glyphicon glyphicon-resize-small | 尝试一下 | |
glyphicon glyphicon-exclamation-sign | 尝试一下 | |
glyphicon glyphicon-gift | 尝试一下 | |
glyphicon glyphicon-leaf | 尝试一下 | |
glyphicon glyphicon-fire | 尝试一下 | |
glyphicon glyphicon-eye-open | 尝试一下 | |
glyphicon glyphicon-eye-close | 尝试一下 | |
glyphicon glyphicon-warning-sign | 尝试一下 | |
glyphicon glyphicon-plane | 尝试一下 | |
glyphicon glyphicon-calendar | 尝试一下 | |
glyphicon glyphicon-random | 尝试一下 | |
glyphicon glyphicon-comment | 尝试一下 | |
glyphicon glyphicon-magnet | 尝试一下 | |
glyphicon glyphicon-chevron-up | 尝试一下 | |
glyphicon glyphicon-chevron-down | 尝试一下 | |
glyphicon glyphicon-retweet | 尝试一下 | |
glyphicon glyphicon-shopping-cart | 尝试一下 | |
glyphicon glyphicon-folder-close | 尝试一下 | |
glyphicon glyphicon-folder-open | 尝试一下 | |
glyphicon glyphicon-resize-vertical | 尝试一下 | |
glyphicon glyphicon-resize-horizontal | 尝试一下 | |
glyphicon glyphicon-hdd | 尝试一下 | |
glyphicon glyphicon-bullhorn | 尝试一下 | |
glyphicon glyphicon-bell | 尝试一下 | |
glyphicon glyphicon-certificate | 尝试一下 | |
glyphicon glyphicon-thumbs-up | 尝试一下 | |
glyphicon glyphicon-thumbs-down | 尝试一下 | |
glyphicon glyphicon-hand-right | 尝试一下 | |
glyphicon glyphicon-hand-left | 尝试一下 | |
glyphicon glyphicon-hand-up | 尝试一下 | |
glyphicon glyphicon-hand-down | 尝试一下 | |
glyphicon glyphicon-circle-arrow-right | 尝试一下 | |
glyphicon glyphicon-circle-arrow-left | 尝试一下 | |
glyphicon glyphicon-circle-arrow-up | 尝试一下 | |
glyphicon glyphicon-circle-arrow-down | 尝试一下 | |
glyphicon glyphicon-globe | 尝试一下 | |
glyphicon glyphicon-wrench | 尝试一下 | |
glyphicon glyphicon-tasks | 尝试一下 | |
glyphicon glyphicon-filter | 尝试一下 | |
glyphicon glyphicon-briefcase | 尝试一下 | |
glyphicon glyphicon-fullscreen | 尝试一下 | |
glyphicon glyphicon-dashboard | 尝试一下 | |
glyphicon glyphicon-paperclip | 尝试一下 | |
glyphicon glyphicon-heart-empty | 尝试一下 | |
glyphicon glyphicon-link | 尝试一下 | |
glyphicon glyphicon-phone | 尝试一下 | |
glyphicon glyphicon-pushpin | 尝试一下 | |
glyphicon glyphicon-usd | 尝试一下 | |
glyphicon glyphicon-gbp | 尝试一下 | |
glyphicon glyphicon-sort | 尝试一下 | |
glyphicon glyphicon-sort-by-alphabet | 尝试一下 | |
glyphicon glyphicon-sort-by-alphabet-alt | 尝试一下 | |
glyphicon glyphicon-sort-by-order | 尝试一下 | |
glyphicon glyphicon-sort-by-order-alt | 尝试一下 | |
glyphicon glyphicon-sort-by-attributes | 尝试一下 | |
glyphicon glyphicon-sort-by-attributes-alt | 尝试一下 | |
glyphicon glyphicon-unchecked | 尝试一下 | |
glyphicon glyphicon-expand | 尝试一下 | |
glyphicon glyphicon-collapse-down | 尝试一下 | |
glyphicon glyphicon-collapse-up | 尝试一下 | |
glyphicon glyphicon-log-in | 尝试一下 | |
glyphicon glyphicon-flash | 尝试一下 | |
glyphicon glyphicon-log-out | 尝试一下 | |
glyphicon glyphicon-new-window | 尝试一下 | |
glyphicon glyphicon-record | 尝试一下 | |
glyphicon glyphicon-save | 尝试一下 | |
glyphicon glyphicon-open | 尝试一下 | |
glyphicon glyphicon-saved | 尝试一下 | |
glyphicon glyphicon-import | 尝试一下 | |
glyphicon glyphicon-export | 尝试一下 | |
glyphicon glyphicon-send | 尝试一下 | |
glyphicon glyphicon-floppy-disk | 尝试一下 | |
glyphicon glyphicon-floppy-saved | 尝试一下 | |
glyphicon glyphicon-floppy-remove | 尝试一下 | |
glyphicon glyphicon-floppy-save | 尝试一下 | |
glyphicon glyphicon-floppy-open | 尝试一下 | |
glyphicon glyphicon-credit-card | 尝试一下 | |
glyphicon glyphicon-transfer | 尝试一下 | |
glyphicon glyphicon-cutlery | 尝试一下 | |
glyphicon glyphicon-header | 尝试一下 | |
glyphicon glyphicon-compressed | 尝试一下 | |
glyphicon glyphicon-earphone | 尝试一下 | |
glyphicon glyphicon-phone-alt | 尝试一下 | |
glyphicon glyphicon-tower | 尝试一下 | |
glyphicon glyphicon-stats | 尝试一下 | |
glyphicon glyphicon-sd-video | 尝试一下 | |
glyphicon glyphicon-hd-video | 尝试一下 | |
glyphicon glyphicon-subtitles | 尝试一下 | |
glyphicon glyphicon-sound-stereo | 尝试一下 | |
glyphicon glyphicon-sound-dolby | 尝试一下 | |
glyphicon glyphicon-sound-5-1 | 尝试一下 | |
glyphicon glyphicon-sound-6-1 | 尝试一下 | |
glyphicon glyphicon-sound-7-1 | 尝试一下 | |
glyphicon glyphicon-copyright-mark | 尝试一下 | |
glyphicon glyphicon-registration-mark | 尝试一下 | |
glyphicon glyphicon-cloud-download | 尝试一下 | |
glyphicon glyphicon-cloud-upload | 尝试一下 | |
glyphicon glyphicon-tree-conifer | 尝试一下 | |
glyphicon glyphicon-tree-deciduous | 尝试一下 |