Bootstrap - Glyphicons

Ce chapitre traitera de Glyphicons, de son utilisation et de quelques exemples. Bootstrap regroupe 200 glyphes au format de police. Comprenons maintenant ce que sont les glyphicons.

Que sont les glyphicons?

Les glyphicons sont des polices d'icônes que vous pouvez utiliser dans vos projets Web. Les Halflings Glyphicons ne sont pas gratuits et nécessitent une licence, mais leur créateur les a mis gratuitement à disposition pour les projets Bootstrap.

"Il est recommandé, en guise de remerciement, nous vous demandons d'inclure un lien facultatif vers GLYPHICONS chaque fois que cela est possible". - Documentation Bootstrap

Où trouver les glyphicons?

Maintenant que nous avons téléchargé la version Bootstrap 3.x et que nous comprenons la structure de ses répertoires dans le chapitre Configuration de l'environnement , les glyphicons se trouvent dans le dossier des polices . Celui-ci contient 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 présentes dans les fichiers bootstrap.css et bootstrap-min.css dans le dossier css du dossier dist . Vous pouvez voir les glyphicons disponibles sur ce lien GLYPHICONS .

Usage

Pour utiliser les icônes, utilisez simplement le code suivant à peu près n'importe où dans votre code. Laissez un espace entre l'icône et le texte pour un remplissage correct.

<span class = "glyphicon glyphicon-search"></span>

L'exemple suivant illustre ceci -

<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-alt"></span>
   </button>
</p>

<button type = "button" class = "btn btn-default btn-lg">
   <span class = "glyphicon glyphicon-user"></span>
   
   User
</button>

<button type = "button" class = "btn btn-default btn-sm">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>

<button type ="button" class = "btn btn-default btn-xs">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>