Les icônes (ou pictogrammes), sur un site web, sont de petits visuels aisément identifiables associés à une action. Par exemple, on pourra mettre une flèche vers la droite pour passer à la page suivante, un dessin d’imprimante pour avoir une version imprimable de la page, une enveloppe pour avoir l’adresse mail de contact, une loupe pour une recherche… Ces images, très abondantes, posent le problème du nombre de requêtes http nécessaire pour tous les charger. En effet, nous savons que le nombre de requêtes http joue dans le temps de chargement d’un site. Une manière très commune de limiter le nombre de requêtes est de regrouper tous les pictogrammes dans une seule image. On accèdera ensuite par la css à la partie désirée. C’est ce que l’on appelle les sprites css.

Cependant, avec l’arrivée de css3 et de @font-face, une autre possibilité commence à être explorée : l’utilisation des fontes-icône, ces polices de caractères dans lesquelles les lettres sont remplacées par des symboles. Voici un exemple d’une telle police que vous pouvez utiliser. Bien entendu, le must reste de créer la sienne, en fonction de ses besoins.

Avantages et inconvénients

• Toutes les transformations css possibles sur une police de caractère sont utilisables sur les fontes-icônes : taille, couleur, ombres. En utilisant des images, il faudrait en créer une pour chaque déclinaison.
• Le revers de la médaille est que la fonte-icône est forcément monochrome, si on peut varier la couleur, on n’en a qu’une à la fois.
• Le redimensionnement par l’utilisateur ou l’utilisation d’écran hd va affecter la qualité d’une image png, mais les images vectorielles des fontes n’auront aucun problème à les gérer (mis à part les problèmes rencontrés avec chrome sous windows).
• Si la fonte-icône n’est pas chargée, le navigateur va la remplacer par une police par défaut. De même, un utilisateur non-voyant entendra le texte correspondant à l’icône. Cela peut présenter un inconvénient, mais peut également être tourné à notre avantage, selon le lien fait dans la fonte entre le texte et l’image.

Bref, il n’y a pas de réponse absolue, si l’icône doit pouvoir se décliner en plusieurs couleurs et dimensions, la fonte-icône semble être une réponse plus adaptée, à condition d’accepter d’avoir des pictogrammes monochromes.

Créer sa fonte-icône avec FontForge

Si on veut intégrer des pictogrammes spécifiques à notre site, le seul moyen est de créer sa propre fonte-icône. La bonne nouvelle, c’est que ce n’est pas si compliqué que cela. Faisons donc notre propre fonte en quelques étapes.

Dans un premier temps, il nous faut des icônes sous format svg. Pour la démonstration, j’ai téléchargé Iconic et utilisé un convertisseur en ligne. Ceux qui veulent approfondir la transformation d’images en svg peuvent utiliser Inkscape, ou créer les svg directement dans FontForge.

Une fois FontForge installé, à l’ouverture de l’application, on choisit de créer une nouvelle fonte.

On obtient une liste de caractères dont aucun n’a de dessin (glyphe) associé.

On décide que le A (comme Accueil) représentera une petite maison. Je double-clique sur le A, puis je choisis dans le menu Fichier “Importer…”.

Je sélectionne le format svg et je vais chercher mon image. Voici ce que j’obtiens dans ma glyphe :

Il est possible, en laissant la sélection sur le format “Image”, de prendre un autre format que svg. Cependant, l’image ne sera pas convertie au format svg : elle sera affiché en fond, pour permettre de dessiner à la main au format svg par-dessus.

Je crée la lettre I et la lettre C de la même manière. Pour les autres lettres, j’ai triché un peu : j’y ai collé le caractère “espace” d’une autre fonte. Vous pouvez également créer le fichier svg correspondant à ce caractère pour l’importer, le svg étant du xml. Voici le contenu du fichier svg généré à partir de l’espace d’une fonte gratuite :

<?xml version="1.0" standalone="no"?><svg viewBox="0 -200 1000 1000"><g transform="matrix(1 0 0 -1 0 800)"><g/></g></svg>

Je vais ensuite dans le menu Fichiers > Générer Fonte(s), et j’exporte ma fonte au format Web Open Font (.woff). Comme je vais tester sous Firefox, cela me suffit, mais pour un projet réel, il faudra générer les autres formats.

Voici le bout de css où je déclare ma fonte :

@font-face {     font-family: 'maFonte';     src:  url('test-webfont.woff') format('woff');     font-weight: normal;     font-style: normal; } .tabs li a {     display: block;     color: #fff;     text-decoration: none;     font: 1.5em 'maFonte';     padding: 0.5em;     border-right: 1px solid #fff; }

Et le code html correspondant :

       
• Accueil
       
• Ippon
       
• Contact
        

Voici le résultat :

Pourquoi avoir écrit en toutes lettres notre menu, alors que seule la première est transformée en pictogramme, les autres étant remplacées par des espaces (et présentant l’inconvénient d’un décentrage du placement) ? C’est très simple : imaginons que pour une raison quelconque, notre police ne soit pas chargée. Voici ce que l’on obtient :

Il y a aussi un avantage en terme d’accessibilité : un logiciel de lecture utilisé par un non-voyant lira “Accueil”, “Ippon” et “Contact”. S’il lisait “A”, “I” et “C”, ce serait bien moins compréhensible.

Avec plus de pictogrammes ?

Ma petite astuce pour l’accessibilité rencontrera rapidement ses limites, par exemple si on a besoin d’une icône pour “Informations”.
Une solution préconisée est d’utiliser des caractères unicodes qui ne seront pas lus, à la place des lettres et des chiffres, pour y placer ses icônes. Ce sont des caractères appartenant à la Private Use Area (pua). C’est la solution choisie par Font-Awesome.
Une autre possibilité est d’utiliser les ligatures. En typographie, il s’agit de remplacer des caractères qui ne vont pas aller bien ensemble (par exemple : fi peut avoir le point du i qui se confond avec le haut du f) par une glyphe regroupant les deux caractères. Le gros intérêt des ligatures est de pouvoir utiliser plus aisément notre fonte-icône : pour obtenir l’image de l’accueil, au lieu d’écrire A ou ⇝, on écrit Accueil, et c’est l’ensemble de ce texte qui est transformé en pictogramme par la magie des ligatures. Pousser le concept permet de créer une ligature pour chaque heure/minute du jour et afficher ainsi une horloge sur sa page. Malheureusement, il semble que les navigateurs ne prennent pas systématiquement en compte les ligatures.

Quelques ressources supplémentaires

Pour ceux que FontForge rebuterait, ce tutoriel explique comment faire avec Icomoon, un outil gratuit en ligne. Et pour les heureux possesseurs de licences Adobe, cet article expose la création de la fonte-icône de GitHub avec Photoshop, Illustrator et Font Squirrel.