Les icônes de Glyphicons
Bootstrap propose 200 icônes de Glyphicons - http://glyphicons.com/. L’intégration d’une icône est très facile parce qu’il suffit d’utiliser la balise <span>. Pour le formulaire de contact de la page d’exemple, le bouton est amélioré en le complétant par une icône. 1 <button class=" btn btn - primary " type=" submit "><span class="
glyphicon glyphicon -ok - sign "></span> Envoyer </button>
Ce qui nous donne la figure 4.51.
Figure 4.51 – Icône dans un bouton
La syntaxe est toute simple. On utilise une balise <span> avec deux classes. La princi- pale est glyphicon suivi de la classe qui correspond à l’icône à afficher glyphicon-*. On peut ainsi créer d’élégantes barres de boutons :
1 <div class=" container "> 2 <div class=" row " >
3 <div class="col -lg -3"> 4 <div class="btn - group ">
5 <a class=" btn btn - danger " href="#"><span class="
glyphicon glyphicon -fast - backward "></span></a>
6 <a class=" btn btn - info " href="#"><span class="
glyphicon glyphicon - backward "></span></a>
7 <a class=" btn btn - warning " href="#"><span class="
glyphicon glyphicon - play "></span></a>
8 <a class=" btn btn - info " href="#"><span class="
glyphicon glyphicon - forward "></span></a>
9 <a class=" btn btn - danger " href="#"><span class="
glyphicon glyphicon -fast - forward "></span></a>
10 </div> 11 </div>
12 <div class="col -lg -1">
13 <div class="btn -group - vertical ">
14 <a class=" btn btn - danger " href="#"><span class="
glyphicon glyphicon - pencil "></span></a>
15 <a class=" btn btn - info " href="#"><span class="
glyphicon glyphicon - search "></span></a>
16 <a class=" btn btn - warning " href="#"><span class="
glyphicon glyphicon - print "></span></a>
17 <a class=" btn btn - success " href="#"><span class="
glyphicon glyphicon - picture "></span></a>
18 </div> 19 </div>
Figure 4.52 – Barres de boutons avec des icônes
Et si on veut une icône colorée ?
Comme il s’agit de polices, il suffit d’utiliser du style :
1 <button class=" btn btn - primary " type=" submit "><span class="
glyphicon glyphicon -ok - sign " style=" color :# 4f4 ;"></span> Envoyer </button>
Ce qui nous donne la figure 4.53.
Figure 4.53 – Une icône colorée
Évidemment on peut mettre ces icônes ailleurs que sur des boutons. . . Partout où on peut écrire en fait !
Rien n’empêche évidemment de sauter des lignes dans un bouton. On peut ainsi créer des boutons en séparant bien l’icône du texte, comme à la figure 4.54.
1 <button class=" btn btn - primary btn -lg"><span class=" glyphicon
glyphicon - user "></span><br> Utilisateurs </button>
2 <button class=" btn btn - warning btn -lg"><span class=" glyphicon
glyphicon - comment "></span><br> Commentaires </button>
3 <button class=" btn btn - success btn -lg"><span class=" glyphicon
glyphicon - calendar "></span><br>Evé nements </button>
4 <button class=" btn btn - danger btn -lg"><span class=" glyphicon
glyphicon - shopping - cart "></span><br>Boutique </button>
5 <button class=" btn btn - info btn -lg"><span class=" glyphicon
Figure 4.54 – Séparer l’icône du texte
Des boutons ronds ?
Il est facile, en ajoutant un peu de style, de créer des boutons ronds qui conviendront à merveille aux icônes. Voici un exemple de style ajouté (voir aussi figure 4.55) : 1 .btn -lg { 2 width : 50px ; 3 height : 50px ; 4 border - radius : 25px ; 5 } Et le code HTML :
1 <button class=" btn btn - primary btn -lg"><span class=" glyphicon
glyphicon - user "></span></button>
2 <button class=" btn btn - warning btn -lg"><span class=" glyphicon
glyphicon - comment "></span></button>
3 <button class=" btn btn - success btn -lg"><span class=" glyphicon
glyphicon - calendar "></span></button>
4 <button class=" btn btn - danger btn -lg"><span class=" glyphicon
glyphicon - shopping - cart "></button>
5 <button class=" btn btn - info btn -lg"><span class=" glyphicon
glyphicon - bullhorn "></span></button>
Figure 4.55 – Des boutons ronds
Les icônes de Font Awesome
Le site Font Awesome - http://fortawesome.github.io/Font-Awesome/ propose une collection de 369 icônes toutes prêtes pour Bootstrap. Évidemment elles ne sont pas intégrées de base dans Bootstrap et il faut déclarer le fichier CSS pour pouvoir les utiliser. Le site propose plusieurs possibilités - http://fortawesome.github.io/ Font-Awesome/get-started/ pour le faire, la plus simple étant d’utiliser le CDN : 1 <link href=" http :// netdna . bootstrapcdn . com /font - awesome /4.0.3/
1 Il faut dé verrouiller <i class="fa fa - unlock "></i> pour sortir
<i class="fa fa -arrow - right "></i>
Figure 4.56 – Icônes dans un texte
On peut aussi dimensionner les icônes selon le contexte, comme à la figure 4.57 : 1 <p><i class="fa fa - print fa -lg"></i> Taille normale </p> 2 <p><i class="fa fa - print fa -2x"></i> Taille double </p> 3 <p><i class="fa fa - print fa -3x"></i> Taille triple </p> 4 <p><i class="fa fa - print fa -4x"></i> Taille quadruple </p> 5 <p><i class="fa fa - print fa -5x"></i> Taille quintuple </p>
Figure 4.57 – Réglage de la taille des icônes
On peut aussi très facilement créer une liste dont les éléments sont bien identifiés avec une icône (voir figure 4.58) :
1 <ul class="fa -ul">
2 <li><i class="fa -li fa fa -check - square "></i>Vé rifier </li> 3 <li><i class="fa -li fa fa - paperclip "></i>Conserver </li> 4 <li><i class="fa -li fa fa - eraser "></i>Effacer </li> 5 <li><i class="fa -li fa fa - print "></i>Imprimer </li> 6 </ul>
Il existe bien d’autres possibilités comme la rotation des icônes, leur animation, leur empilement, que je vous laisse découvrir en consultant la page des exemples - http: //fortawesome.github.io/Font-Awesome/examples/ du site.
Figure 4.58 – Des puces avec des icônes