Icon fonts : un Web design avec des pictogrammes vectoriels

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 facilitent la navigation des utilisateurs, mettent en lumière des fonctions et ne nécessitent pas d’explications. Étonnamment, ces icônes sont de plus en plus rarement intégrés en tant qu’image bitmaps ou sprite CSS. Les développeurs 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 pictogrammes vectoriels et non des lettres. Face aux caractères définis par des pixels dans un bitmap, les icones vectorielles présentent l’avantage d’un côté d’être adaptables 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 adaptabilité, les icônes vectorielles sont de très haute qualité et ce sur tous les écrans, ce qui n’est pas le cas des illustrations sous format bitmap qui ne présentent 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 pictogramme. Les fournisseurs qui proposent des icon fonts gratuitement 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éveloppeurs de sites Web n’ont pas besoin de tous les pictogrammes d’une icon font. Il est courant qu’une combinaison d’icônes de différents fournisseurs puisse se trouver sur un même site Internet. C’est ce que permettent ces mallettes de création mises en place grâce aux générateurs de polices de caractères tels que Fontello, fontastic.me voire IcoMoon App. Une mallette individuelle 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 chargement 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 correspondante doit être intégrée dans l’en-tête du document HTML. Certains fournisseurs fournissent un fichier CSS par défaut. Une intégration via le framework CSS Bootstrap est également possible tant que la police est prise en charge. Vous trouverez toutes les informations sur l’intégration d’icon fonts dans notre Digital Guide.

Etant donné que les icon fonts sont téléchargées via une feuille de style propre et récupérées via des classes CSS prédéfinis, elles présentent de nombreuses possibilités de configuration. Contrairement aux fichiers graphiques, les pictogrammes vectoriels intégrés via des icon fonts sont définis par des changements dans le code CSS. C’est ainsi que les développeurs 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.