Icon fonts : un Web design avec des pic­to­grammes vec­to­riels

Une loupe à côté du champ de recherche, un caddie pour une boutique en ligne ou une enveloppe à côté d’une adresse Internet, voilà ce qu’on trouve sur presque tous les sites du Web. Ces éléments fa­ci­li­tent la na­vi­ga­tion des uti­li­sa­teurs, mettent en lumière des fonctions et ne né­ces­si­tent pas d’ex­pli­ca­tions. Éton­nam­ment, ces icônes sont de plus en plus rarement intégrés en tant qu’image bitmaps ou sprite CSS. Les dé­ve­lop­peurs de sites Internet ont désormais plutôt recours aux icon fonts. Un icon font est une police de caractère pour le Web qui contient des pic­to­grammes vec­to­riels et non des lettres. Face aux ca­rac­tères définis par des pixels dans un bitmap, les icones vec­to­rielles pré­sen­tent l’avantage d’un côté d’être adap­tables sans que cela n’altère leur qualité mais également de disposer d’une taille plus petite.

Par ailleurs, les icon fonts peuvent être affichées en CSS (feuille de style en cascade). En raison de cette adap­ta­bi­lité, les icônes vec­to­rielles sont de très haute qualité et ce sur tous les écrans, ce qui n’est pas le cas des il­lus­tra­tions sous format bitmap qui ne pré­sen­tent souvent qu’une seule couleur. Par ailleurs, il convient de toujours intégrer un icon font complet même si celui-ci n’utilise qu’un seul pic­to­gramme. Les four­nis­seurs qui proposent des icon fonts gra­tui­te­ment ne manquent pas sur la Toile. Par ailleurs, il est possible, grâce à des mallettes de création, de créer soi-même son icon font. 

En général, les dé­ve­lop­peurs de sites Web n’ont pas besoin de tous les pic­to­grammes d’une icon font. Il est courant qu’une com­bi­nai­son d’icônes de dif­fé­rents four­nis­seurs puisse se trouver sur un même site Internet. C’est ce que per­met­tent ces mallettes de création mises en place grâce aux gé­né­ra­teurs de polices de ca­rac­tères tels que Fontello, fontastic.me voire IcoMoon App. Une mallette in­di­vi­duelle présente l’avantage que seules les icônes associées à la police sont intégrées, ce qui est visible sur le site Internet. Cela permet de réduire la taille du fichier mais également le temps de char­ge­ment d’un site Web. 

Les icon fonts sont définies en général grâce à une classe CSS dans le code source HTML. L’icon font cor­res­pon­dante doit être intégrée dans l’en-tête du document HTML. Certains four­nis­seurs four­nis­sent un fichier CSS par défaut. Une in­té­gra­tion via le framework CSS Bootstrap est également possible tant que la police est prise en charge. Vous trouverez toutes les in­for­ma­tions sur l’in­té­gra­tion d’icon fonts dans notre Digital Guide.

Etant donné que les icon fonts sont té­lé­char­gées via une feuille de style propre et ré­cu­pé­rées via des classes CSS pré­dé­fi­nis, elles pré­sen­tent de nom­breuses pos­si­bi­li­tés de con­fi­gu­ra­tion. Con­trai­re­ment aux fichiers gra­phiques, les pic­to­grammes vec­to­riels intégrés via des icon fonts sont définis par des chan­ge­ments dans le code CSS. C’est ainsi que les dé­ve­lop­peurs de sites Web adaptent la taille, la couleur ainsi que l’opacité d’un icône en fonction des sites. Il est également possible de concevoir des icônes en utilisant des textures voire des effets d’ombre.