Sommaire

Les icônes en glyphe COMPOSANTS D’INTERFACE D’ADMINISTRATION:Icônes en glyphe

1. Des icônes en police de caractères

Dans les mises en page de vos sites Web, vous utilisez les icônes pour illustrer vos propos, pour les insérer dans des boutons, pour rendre vos liens plus attractifs. Vous pouvez bien sûr utiliser des images, il en existe des milliers sur le Web. Mais une solution plus simple est d’utiliser une police de caractères dont les glyphes ne sont pas des lettres mais des icônes. Cela permet de gagner du temps de chargement, les caractères d’une police sont toujours plus rapides à charger que des images.

Dans les interfaces d’administration des applications Web, cette solution est très largement répandue (cf. les CMS WordPress, Joomla!, Bolt...).

Bootstrap nous propose d’utiliser la fonte nommée Glyphicon Halflings. Cette fonte n’est pas gratuite en usage standard mais elle vous est proposée gratuitement avec Bootstrap. La contrepartie de cette gratuité est de faire un lien vers le site de cette fonte : http://glyphicons.com

Pour illustrer cet exemple, consultez le fichier Bootstrap-07-COMP-Admin/01-interface.html.

2. Utiliser une icône

Cette fonte met à votre disposition 180 icônes consultables à cette adresse : http://getbootstrap.com/components/#glyphicons. En voici un extrait :

images/C13-001.png

Vous avez le nom de la classe à appeler sous l’icône de chaque glyphe.

Supposons que dans une page ...