Bootstrap Icônes de police (Glyphicons)
Ce chapitre expliquera les icônes de police (Glyphicons), et à travers quelques exemples vous apprendrez à les utiliser. Bootstrap regroupe plus de 200 glyphes au format de police. Tout d'abord, comprenons ce que sont les icônes de police.
Que sont les icônes de police ?
Les icônes de police sont des polices d'icônes utilisées dans les projets Web. Bien queGlyphicons Halflingsnécessitent une licence commerciale, vous pouvez utiliser ces icônes gratuitement grâce au Bootstrap du projet.
Pour témoigner notre gratitude aux auteurs des icônes, nous espérons que vous ajouterez un lien vers le site Web GLYPHICONS lorsque vous les utiliserez.
Obtention des icônes de police
Nous avons déjà, dans le chapitreInstallation de l'environnement, téléchargé la version Bootstrap 3.x et compris sa structure de répertoires. Dans le dossierfonts, vous pouvez trouver les icônes de police, qui incluent les fichiers suivants :
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
Les règles CSS associées sont écrites dansdistle dossier css à l'intérieur du dossierbootstrap.cssetbootstrap-min.csssur le fichier.
Liste des icônes de police
Cliquez ici pour voir la liste des icônes de police disponibles.
Explication des règles CSS
Les règles CSS suivantes composent la classe glyphicon.
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
Ainsi, la règle @font-face déclare en réalité la font-family et l'emplacement où se trouvent les glyphicons.
.glyphiconLa classe déclare une position relative décalée de 1px par rapport au haut, affichée en inline-block, déclare la police, spécifie font-style et font-weight comme normal, et définit line-height sur 1. De plus, utilisez-webkit-font-smoothing: antialiasedet-moz-osx-font-smoothing: grayscale;pour obtenir une cohérence entre navigateurs.
Ensuite, ici
.glyphicon:empty {
width: 1em;
}
est le glyphicon vide.
Il y a 200 classes ici, chaque classe cible une icône. Le format commun de ces classes est le suivant :
.glyphicon-keyword:before {
content: "hexvalue";
}
Par exemple, l'icône utilisateur utilisée a la classe suivante :
.glyphicon-user:before {
content: "\e008";
}
Utilisation
Pour utiliser une icône, utilisez simplement le code suivant. Veuillez laisser un espace approprié entre l'icône et le texte.
<span class="glyphicon glyphicon-search"></span>
L'exemple suivant montre comment utiliser les icônes de police :
Exemple
<p>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
</p>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span> Utilisateur
</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user"></span> Utilisateur
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user"></span> Utilisateur
</button>
Essayez-le »
Le résultat est comme indiqué ci-dessous :
Barre de navigation avec icônes de police
Exemple
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Basculer la navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Nom du projet</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<span class="glyphicon glyphicon-home">Accueil</span></a>
</li>
<li>
<a href="#shop">
<span class="glyphicon glyphicon-shopping-cart">Boutique</span></a>
</li>
<li>
<a href="#support">
<span class="glyphicon glyphicon-headphones">Assistance</span></a>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!--jQuery (Les plugins Bootstrap doivent être inclus)-->
<script src="https://cdn.static.example.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Inclut tous les plugins compilés-->
<script src="https://cdn.static.example.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Essayez-le »
Personnalisation des icônes de police
Nous avons déjà vu comment utiliser les icônes de police. Voyons maintenant comment personnaliser les icônes de police.
Nous allons commencer par l'exemple ci-dessus et personnaliser les icônes en modifiant la taille de la police, la couleur et en appliquant une ombre au texte.
Voici le code de départ :
<button type="button" class="btn btn-primary btn-lg"> <span class="glyphicon glyphicon-user"></span> User </button>
L'effet est comme indiqué ci-dessous :
Personnalisation des tailles de police
En augmentant ou en diminuant la taille de la police d'une icône, vous pouvez rendre l'icône plus grande ou plus petite.
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px"> <span class="glyphicon glyphicon-user"></span> User </button>
Personnalisation des couleurs de police
<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);"> <span class="glyphicon glyphicon-user"></span> User </button>
Application d'ombres au texte
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;"> <span class="glyphicon glyphicon-user"></span> User </button>
Personnaliser les icônes de police en ligne
Cliquez ici pour personnaliser les icônes de police »
Liste d'icônes
| Icône | Nom de classe | Exemple |
|---|---|---|
| glyphicon glyphicon-asterisk | Essayez-le | |
| glyphicon glyphicon-plus | Essayez-le | |
| glyphicon glyphicon-minus | Essayez-le | |
| glyphicon glyphicon-euro | Essayez-le | |
| glyphicon glyphicon-cloud | Essayez-le | |
| glyphicon glyphicon-envelope | Essayez-le | |
| glyphicon glyphicon-pencil | Essayez-le | |
| glyphicon glyphicon-glass | Essayez-le | |
| glyphicon glyphicon-music | Essayez-le | |
| glyphicon glyphicon-search | Essayez-le | |
| glyphicon glyphicon-heart | Essayez-le | |
| glyphicon glyphicon-star | Essayez-le | |
| glyphicon glyphicon-star-empty | Essayez-le | |
| glyphicon glyphicon-user | Essayez-le | |
| glyphicon glyphicon-film | Essayez-le | |
| glyphicon glyphicon-th-large | Essayez-le | |
| glyphicon glyphicon-th | Essayez-le | |
| glyphicon glyphicon-th-list | Essayez-le | |
| glyphicon glyphicon-ok | Essayez-le | |
| glyphicon glyphicon-remove | Essayez-le | |
| glyphicon glyphicon-zoom-in | Essayez-le | |
| glyphicon glyphicon-zoom-out | Essayez-le | |
| glyphicon glyphicon-off | Essayez-le | |
| glyphicon glyphicon-signal | Essayez-le | |
| glyphicon glyphicon-cog | Essayez-le | |
| glyphicon glyphicon-trash | Essayez-le | |
| glyphicon glyphicon-home | Essayez-le | |
| glyphicon glyphicon-file | Essayez-le | |
| glyphicon glyphicon-time | Essayez-le | |
| glyphicon glyphicon-road | Essayez-le | |
| glyphicon glyphicon-download-alt | Essayez-le | |
| glyphicon glyphicon-download | Essayez-le | |
| glyphicon glyphicon-upload | Essayez-le | |
| glyphicon glyphicon-inbox | Essayez-le | |
| glyphicon glyphicon-play-circle | Essayez-le | |
| glyphicon glyphicon-repeat | Essayez-le | |
| glyphicon glyphicon-refresh | Essayez-le | |
| glyphicon glyphicon-list-alt | Essayez-le | |
| glyphicon glyphicon-lock | Essayez-le | |
| glyphicon glyphicon-flag | Essayez-le | |
| glyphicon glyphicon-headphones | Essayez-le | |
| glyphicon glyphicon-volume-off | Essayez-le | |
| glyphicon glyphicon-volume-down | Essayez-le | |
| glyphicon glyphicon-volume-up | Essayez-le | |
| glyphicon glyphicon-qrcode | Essayez-le | |
| glyphicon glyphicon-barcode | Essayez-le | |
| glyphicon glyphicon-tag | Essayez-le | |
| glyphicon glyphicon-tags | Essayez-le | |
| glyphicon glyphicon-book | Essayez-le | |
| glyphicon glyphicon-bookmark | Essayez-le | |
| glyphicon glyphicon-print | Essayez-le | |
| glyphicon glyphicon-camera | Essayez-le | |
| glyphicon glyphicon-font | Essayez-le | |
| glyphicon glyphicon-bold | Essayez-le | |
| glyphicon glyphicon-italic | Essayez-le | |
| glyphicon glyphicon-text-height | Essayez-le | |
| glyphicon glyphicon-text-width | Essayez-le | |
| glyphicon glyphicon-align-left | Essayez-le | |
| glyphicon glyphicon-align-center | Essayez-le | |
| glyphicon glyphicon-align-right | Essayez-le | |
| glyphicon glyphicon-align-justify | Essayez-le | |
| glyphicon glyphicon-list | Essayez-le | |
| glyphicon glyphicon-indent-left | Essayez-le | |
| glyphicon glyphicon-indent-right | Essayez-le | |
| glyphicon glyphicon-facetime-video | Essayez-le | |
| glyphicon glyphicon-picture | Essayez-le | |
| glyphicon glyphicon-map-marker | Essayez-le | |
| glyphicon glyphicon-adjust | Essayez-le | |
| glyphicon glyphicon-tint | Essayez-le | |
| glyphicon glyphicon-edit | Essayez-le | |
| glyphicon glyphicon-share | Essayez-le | |
| glyphicon glyphicon-check | Essayez-le | |
| glyphicon glyphicon-move | Essayez-le | |
| glyphicon glyphicon-step-backward | Essayez-le | |
| glyphicon glyphicon-fast-backward | Essayez-le | |
| glyphicon glyphicon-backward | Essayez-le | |
| glyphicon glyphicon-play | Essayez-le | |
| glyphicon glyphicon-pause | Essayez-le | |
| glyphicon glyphicon-stop | Essayez-le | |
| glyphicon glyphicon-forward | Essayez-le | |
| glyphicon glyphicon-fast-forward | Essayez-le | |
| glyphicon glyphicon-step-forward | Essayez-le | |
| glyphicon glyphicon-eject | Essayez-le | |
| glyphicon glyphicon-chevron-left | Essayez-le | |
| glyphicon glyphicon-chevron-right | Essayez-le | |
| glyphicon glyphicon-plus-sign | Essayez-le | |
| glyphicon glyphicon-minus-sign | Essayez-le | |
| glyphicon glyphicon-remove-sign | Essayez-le | |
| glyphicon glyphicon-ok-sign | Essayez-le | |
| glyphicon glyphicon-question-sign | Essayez-le | |
| glyphicon glyphicon-info-sign | Essayez-le | |
| glyphicon glyphicon-screenshot | Essayez-le | |
| glyphicon glyphicon-remove-circle | Essayez-le | |
| glyphicon glyphicon-ok-circle | Essayez-le | |
| glyphicon glyphicon-ban-circle | Essayez-le | |
| glyphicon glyphicon-arrow-left | Essayez-le | |
| glyphicon glyphicon-arrow-right | Essayez-le | |
| glyphicon glyphicon-arrow-up | Essayez-le | |
| glyphicon glyphicon-arrow-down | Essayez-le | |
| glyphicon glyphicon-share-alt | Essayez-le | |
| glyphicon glyphicon-resize-full | Essayez-le | |
| glyphicon glyphicon-resize-small | Essayez-le | |
| glyphicon glyphicon-exclamation-sign | Essayez-le | |
| glyphicon glyphicon-gift | Essayez-le | |
| glyphicon glyphicon-leaf | Essayez-le | |
| glyphicon glyphicon-fire | Essayez-le | |
| glyphicon glyphicon-eye-open | Essayez-le | |
| glyphicon glyphicon-eye-close | Essayez-le | |
| glyphicon glyphicon-warning-sign | Essayez-le | |
| glyphicon glyphicon-plane | Essayez-le | |
| glyphicon glyphicon-calendar | Essayez-le | |
| glyphicon glyphicon-random | Essayez-le | |
| glyphicon glyphicon-comment | Essayez-le | |
| glyphicon glyphicon-magnet | Essayez-le | |
| glyphicon glyphicon-chevron-up | Essayez-le | |
| glyphicon glyphicon-chevron-down | Essayez-le | |
| glyphicon glyphicon-retweet | Essayez-le | |
| glyphicon glyphicon-shopping-cart | Essayez-le | |
| glyphicon glyphicon-folder-close | Essayez-le | |
| glyphicon glyphicon-folder-open | Essayez-le | |
| glyphicon glyphicon-resize-vertical | Essayez-le | |
| glyphicon glyphicon-resize-horizontal | Essayez-le | |
| glyphicon glyphicon-hdd | Essayez-le | |
| glyphicon glyphicon-bullhorn | Essayez-le | |
| glyphicon glyphicon-bell | Essayez-le | |
| glyphicon glyphicon-certificate | Essayez-le | |
| glyphicon glyphicon-thumbs-up | Essayez-le | |
| glyphicon glyphicon-thumbs-down | Essayez-le | |
| glyphicon glyphicon-hand-right | Essayez-le | |
| glyphicon glyphicon-hand-left | Essayez-le | |
| glyphicon glyphicon-hand-up | Essayez-le | |
| glyphicon glyphicon-hand-down | Essayez-le | |
| glyphicon glyphicon-circle-arrow-right | Essayez-le | |
| glyphicon glyphicon-circle-arrow-left | Essayez-le | |
| glyphicon glyphicon-circle-arrow-up | Essayez-le | |
| glyphicon glyphicon-circle-arrow-down | Essayez-le | |
| glyphicon glyphicon-globe | Essayez-le | |
| glyphicon glyphicon-wrench | Essayez-le | |
| glyphicon glyphicon-tasks | Essayez-le | |
| glyphicon glyphicon-filter | Essayez-le | |
| glyphicon glyphicon-briefcase | Essayez-le | |
| glyphicon glyphicon-fullscreen | Essayez-le | |
| glyphicon glyphicon-dashboard | Essayez-le | |
| glyphicon glyphicon-paperclip | Essayez-le | |
| glyphicon glyphicon-heart-empty | Essayez-le | |
| glyphicon glyphicon-link | Essayez-le | |
| glyphicon glyphicon-phone | Essayez-le | |
| glyphicon glyphicon-pushpin | Essayez-le | |
| glyphicon glyphicon-usd | Essayez-le | |
| glyphicon glyphicon-gbp | Essayez-le | |
| glyphicon glyphicon-sort | Essayez-le | |
| glyphicon glyphicon-sort-by-alphabet | Essayez-le | |
| glyphicon glyphicon-sort-by-alphabet-alt | Essayez-le | |
| glyphicon glyphicon-sort-by-order | Essayez-le | |
| glyphicon glyphicon-sort-by-order-alt | Essayez-le | |
| glyphicon glyphicon-sort-by-attributes | Essayez-le | |
| glyphicon glyphicon-sort-by-attributes-alt | Essayez-le | |
| glyphicon glyphicon-unchecked | Essayez-le | |
| glyphicon glyphicon-expand | Essayez-le | |
| glyphicon glyphicon-collapse-down | Essayez-le | |
| glyphicon glyphicon-collapse-up | Essayez-le | |
| glyphicon glyphicon-log-in | Essayez-le | |
| glyphicon glyphicon-flash | Essayez-le | |
| glyphicon glyphicon-log-out | Essayez-le | |
| glyphicon glyphicon-new-window | Essayez-le | |
| glyphicon glyphicon-record | Essayez-le | |
| glyphicon glyphicon-save | Essayez-le | |
| glyphicon glyphicon-open | Essayez-le | |
| glyphicon glyphicon-saved | Essayez-le | |
| glyphicon glyphicon-import | Essayez-le | |
| glyphicon glyphicon-export | Essayez-le | |
| glyphicon glyphicon-send | Essayez-le | |
| glyphicon glyphicon-floppy-disk | Essayez-le | |
| glyphicon glyphicon-floppy-saved | Essayez-le | |
| glyphicon glyphicon-floppy-remove | Essayez-le | |
| glyphicon glyphicon-floppy-save | Essayez-le | |
| glyphicon glyphicon-floppy-open | Essayez-le | |
| glyphicon glyphicon-credit-card | Essayez-le | |
| glyphicon glyphicon-transfer | Essayez-le | |
| glyphicon glyphicon-cutlery | Essayez-le | |
| glyphicon glyphicon-header | Essayez-le | |
| glyphicon glyphicon-compressed | Essayez-le | |
| glyphicon glyphicon-earphone | Essayez-le | |
| glyphicon glyphicon-phone-alt | Essayez-le | |
| glyphicon glyphicon-tower | Essayez-le | |
| glyphicon glyphicon-stats | Essayez-le | |
| glyphicon glyphicon-sd-video | Essayez-le | |
| glyphicon glyphicon-hd-video | Essayez-le | |
| glyphicon glyphicon-subtitles | Essayez-le | |
| glyphicon glyphicon-sound-stereo | Essayez-le | |
| glyphicon glyphicon-sound-dolby | Essayez-le | |
| glyphicon glyphicon-sound-5-1 | Essayez-le | |
| glyphicon glyphicon-sound-6-1 | Essayez-le | |
| glyphicon glyphicon-sound-7-1 | Essayez-le | |
| glyphicon glyphicon-copyright-mark | Essayez-le | |
| glyphicon glyphicon-registration-mark | Essayez-le | |
| glyphicon glyphicon-cloud-download | Essayez-le | |
| glyphicon glyphicon-cloud-upload | Essayez-le | |
| glyphicon glyphicon-tree-conifer | Essayez-le | |
| glyphicon glyphicon-tree-deciduous | Essayez-le |