Une icon font, c'est une police de caractères, comme Helvetica ou Comic Sans MS (hum), sauf que les lettres sont des icônes.

Elle se présente sous la forme d'un fichier de police de caractères – un fichier TTF – et s'utilise exactement comme une police de caractères.

On va donc voir pourquoi il faut arrêter d'utiliser des icônes PNG pour les remplacer par une icon font.

Des... ? Avantages ? Oooh oui.

On va commencer par lister quelques avantages d'utiliser une icon font sur son site web. Comme ça c'est fait.

D'abord, comme toute police de caractères, l'icon font est modifiable par le CSS (du coup, cette phrase justifie à elle-seule l'utilisation d'une icon font). C'est à dire qu'on peut lui donner une taille (via "font-size"), une couleur (via "color"), une ombre, une opacité et toutes les transformations que nous propose le CSS3.

L'icon font est aussi (presque) facile à utiliser qu'une police de caractères.

Au lieu de charger X fichiers PNG – c'est à dire X appels au serveur – pour afficher vos icônes, un seul fichier est nécessaire.

Cerise sur le gateau, elle est plutôt bien prise en charge par les navigateurs web : http://caniuse.com/#feat=fontface.

Bon. Passons à la pratique !

Sur Internet

Il y a plétore d'icon fonts sur Internet. Certaines sont vraiment bien fournies et mises à jour régulièrement comme Font Awesome ou Foundation. D'autres sites permettent de se créer une icon font personnalisée à partir d'icônes que l'on aura selectionné sur leur plateforme, comme IcoMoon.

Créer son icon font, c'est facile !

Ce qui est top, c'est que créer son icon font est super simple. La seule vraie difficulté, c'est le design/dessin des icônes ;)

Créer ses icônes

Parlons-en ! Il faut que ce soit des fichiers vectorisés SVG. Pourquoi ? Parce qu'il faut que l'icône puisse être manipulée par le CSS. Le vector est le seul format qui permette de manipuler la taille sans destruction (contrairement aux formats images type PNG, JPEG, etc.).

J'utilise Illustrator pour créer mes icônes. Dans un même document, je crée un plan de travail pour chaque icône. Toutes les icônes ont la même couleur, c'est le CSS qui s'en chargera ensuite. Par exemple, voici mes icônes dans Illustrator :

Une fois terminées, j'export mes icônes en SVG (Fichier > Exporter...). Je fais bien attention d'utiliser les plans de travail pour créer autant d'icônes que de plans de travail. Ce qui me donne cette liste de fichiers :

Générer l'icon font

Ensuite j'utilise une plateforme en ligne pour créer ma font. Il en existe quelques unes. J'utilise IcoMoon.

J'importe mes fichiers SVG sur le site et je sélectionne les icônes qui seront présentes dans ma font (je peux aussi en ajouter d'autres, déjà présentes sur la plateforme).

Je clique ensuite sur "Generate Font" (en bas). IcoMoon va m'afficher une page avec les différents "caractères" de ma font. Je peux leur donner un nom (ça sera plus simple ensuite pour les classes CSS).

Une fois ce travail terminé, je clique sur "Download" (en bas). Je récupère, sous forme d'un fichier ZIP, mon icon font et les fichiers nécessaires à son utilisation.

Comment je l'utilise ?

Dans le fichier ZIP que m'a fourni IcoMoon, j'ai un dossier "fonts/" avec mon icon font et un fichier CSS qui me servira à manipuler ma font.

Je mets le dossier font/ au bon endroit sur mon site web (pour qu'il soit accessible à mon fichier CSS. Il est peut être nécessaire de changer quelques chemins dans ce dernier). Puis, j'importe mon fichier CSS sur mon site :

<link rel="stylesheet" href="style.css"></head>

Je peut ajouter mes icônes dans le code HTML. Par exemple, pour mon icône "grossesse", j'utilise une balise "span" avec la classe CSS correspondante :

<span class="icon-grossesse"></span>

En regardant le fichier CSS, j'ai la liste des classes CSS correspondant à chacune de mes icônes.

Si je veux mon icône rouge, j'ai juste à rajouter l'instruction CSS suivante dans mon fichier CSS :

.icon-grossesse { color: #F00; }

Voila !