Les icônes Bootstrap 3

Une icône est une image comme n’importe quelle autre. Cependant, le terme « icône » désigne le plus souvent une image de taille relativement petite et dont le but est de représenter ou illustrer quelque chose. Bootstrap 3 propose par défaut la bibliothèque d’icônes Glyphicon. Une fois celle-ci présentée, nous irons plus loin en étudiant Font Awesome, une bibliothèque d’icônes plus complète et optimisée pour Bootstrap.

Utiliser la bibliothèque Glyphicon

Glyphicon est une librairie payante, créée par Jan Kovarík en 2010. Son auteur a décidé suite à un accord avec les auteurs de Bootstrap, d’inclure ses icônes, sous licence libre, dans la version standard de Bootstrap 3.

Vous trouverez l’ensemble des icône (180 icône) distribuées avec Bootstrap 3 sur l’adresse suivante : http://getbootstrap.com/components

Pour ajouter une icône de Glyphicon à votre page, il suffit d’insérer la classe .glyphicon et la sous-classe .glyphicon-[nom de l’icône] dans dans la démonstration ci-après:

Résultat:

icones-Glyphicon-bootstrap3

Exemple d’utilisation de Glyphicon

Plus d’icônes avec Font Awesome

Font Awesome est une bibliothèque de 371 icônes totalement libre de droits, créée pour Bootstrap par Dave Gandy.

a. Installer Font Awesome

Rendez-vous sur le site officiel de Font Awesome : http://fortawesome.github.io/Font-Awesome et téléchargez la dernière version disponible.

Une fois l’archive extraite, quatre dossiers sont créés(css, fonts, less et scss). Afin d’utiliser Font Awesome, seuls deux d’entre eux sont nécessaires : « css » et « font ».

b. Créer une première page utilisant Font Awesome

Après l’installation de Font Awesome, il est maintenant possible de commencer à l’utiliser :

Analyse du code:

<i class= »fa fa-linkedin-square »></i>

Font Awesome fonctionne de la même manière que Glyphicon : les icônes sont créées en utilisant les balises . Nous insérons ensuite la classe .fa, qui permet de faire appel à Font Awesome. Ici, nous allons afficher une icône reproduisant le logo de LinkedIn en utilisant la sous-classe dédiée .fa-linkedin-square.

<i class= »fa fa-facebook-square »></i>

Affichage d’une icône reprenant le logo de Facebook.

<i class= »fa fa-google-plus-square »></i>

Cette ligne permet de reproduire le logo de Google Plus.

En chargeant la page ainsi créée, nous obtenons l’écran suivant :

Exemple de Font Awesome

Exemple de Font Awesome

c. Manipuler les tailles d’icônes

Ce qui fait la force de Font Awesome est son utilisation d’une police de caractères vectorielle, ce qui lui permet de garder la même qualité du visuel même si on agrandis la taille des icônes

Par défaut, la taille d’une icône est héritée de la balise parente. Par exemple, si l’icône est placée entre les balises et, sa taille est de 36 pixels.

Il est possible d’agrandir une icône en utilisant les classes complémentaires suivantes :

Grille Classes
.fa-lg 33 % plus grande
.fa-2x Deux fois plus grande
.fa-3x Trois fois plus grande
.fa-4x Quatre fois plus grande
.fa-5x Cinq fois plus grande

Exemple :

Le code ci-dessus permet d’afficher l’icône « fa-twitter » dans cinq tailles différentes :

Cinq tailles différente de l'icône "fa-twitter" (FontAwesome)

Cinq tailles différente de l’icône « fa-twitter » (FontAwesome)

A cette occasion, je vous invite à nous suivre sur twitter ====> https://twitter.com/theopentuto

d. Utiliser Font Awesome dans les listes

Avec Font Awesome, il est possible de modifier les puces d’une liste sans à voir à changer une ligne du code CSS. Pour cela, nous utiliserons les classes .fa-ul et .fa-li. Dans l’exemple ci-dessous, nous allons créer une liste en utilisant des icônes différentes :

Explication du code :

<ul class= »fa-ul »>

Début de la liste. L’utilisation de la classe .fa-ul permet d’associer Font Awesome à la liste.

<li><i class= »fa-li fa fa-twitter »></i> Twitter</li>

Premier élément de la liste. La puce par défaut est remplacée par le logo de twitter. Nous faisons appel, ici, à la classe .fa-li.

À l’écran, nous obtenons la liste suivante :

Utilisation de Font Awesome dans les listes

Utilisation de Font Awesome dans les listes

e. Faire pivoter une icône

Font Awesome dispose de deux types de fonctionnalités de rotation. La rotation statique permet de retourner une icône selon l’angle désiré. La rotation dynamique permet de créer un effet animé dans lequel une icône est en rotation continue.

Rotation statique

En utilisant la collection de classes .fa-rotate-[degrés de rotation], il est possible de créer un effet de rotation statique :

Le navigateur affiche l’icône « enfant » de la manière suivante :

Rotation statique d'une icône avec Font Awesome

Rotation statique d’une icône avec Font Awesome

Rotation dynamique

En utilisant la classe .fa-spin, nous allons pouvoir créer un effet de rotation animée. Cette fonctionnalité est particulièrement utile, par exemple, pour afficher une roue qui tourne indiquant à l’utilisateur qu’un script AJAX est en cours d’exécution ou qu’une page est en cours de chargement.

 

 

Laisser un commentaire