De nos jours, que vous travailliez dans la conception de sites web, de logiciels en ligne ou dans le design d'interfaces, vous n'avez pas pu passer à côté du phénomène des fonticons ou polices d'icônes.

Ces polices de caractères sont constituées de symboles (un peu comme le bon vieux Wingdings…) qui utilisent des caractères différents de l'alphabet usuel (pour éviter les erreurs d'interprétation par les lecteurs d'écran pour malvoyants), pris dans la zone dite Supplementary Private Use Area. Une feuille de style CSS permet de mapper tout ça avec un nom de classe éloquent.

L'avantage est que vos icônes sont désormais redimensionnables sans risque de pixellisation, colorables, stylables (et hop, une petite ombre)… Plus besoin d'exporter des pelletées de png pour chaque état de bouton. Ça fonctionne même dans des applications Android ! Et imaginez le gain de performances au chargement du site, puisqu'il n'y a plus d'images à afficher !

Et comme la mode actuelle est au flat design, vous comprendrez aisément pourquoi il n'y a plus un site ou un tableau de bord qui ne s'appuie sur les fonticons.

Il existe des collections de FontIcons très bien faites et qui couvrent la plupart des besoins. La plus connue (et la plus utilisée) est FontAwesome. Vous avez aussi IcoMoon, Glyphicons, Themify, Ionicons…

Et pourquoi ne pas créer la vôtre ? Des outils en ligne gratuits (IcoMoon, Fontastic, Fontello…) vous proposent de générer votre propre fonticon, soit à partir de packs existants, soit à partir de vos propres icônes. Mais l'inscription est obligatoire, et cela revient à confier vos graphismes originaux à n'importe qui. Ce qui est plutôt ennuyeux si vous avez payé un graphiste une blinde pour créer vos icônes originales. Ou si vous y avez consacré pas mal de temps vous-même.

Heureusement, des développeurs ont créé des applications en ligne de commande qui vous permettent de générer votre propre FontIcon, directement sur votre PC. J'ai personnellement opté pour Fontcustom, qui m'a donné toute satisfaction.

Il existe aussi Icon Font Generator (mais le centrage des icônes est catastrophique) et Gulp Iconfont (que je n'ai pas testé)

Installation de Fontcustom

L'installation nécessite Linux. Donc si vous êtes sous Windows, vous pouvez utiliser une machine virtuelle, ou tenter avec votre serveur ou votre Raspberry Pi. Ou essayer les tutos suggérés ici.

Fontcustom a besoin de Ruby 1.9.2 ou supérieur (les packages de dev) et de FontForge.

Sous Ubuntu

sudo apt-get install ruby1.*.*-dev

sudo apt-get install fontforge

wget http://people.mozilla.com/~jkew/woff/woff-code-latest.zip

unzip woff-code-latest.zip -d sfnt2woff && cd sfnt2woff && make && sudo mv sfnt2woff /usr/local/bin/

Si cette étape échoue avec erreur 1 et fatal error: zlib.h: aucun fichier ou dossier de ce type, il vous faudra peut-être installer zlib1g-dev avec un petit  sudo apt-get install zlib1g-dev

Et enfin…

gem install fontcustom

Sur un vieux PC comme mon Inspiron 12, cette ultime étape prend plusieurs longues minutes. Déjà, rien que pour voir apparaître la 1e ligne « Fetching: json-1.8.6.gem (100%), il a fallu patienter une bonne grosse minute.

Sous CentOS

Autant vous le dire, je n'y suis pas arrivée. J'ai commencé par :

yum install ruby

J'ai ensuite installé les dépendances (un expert Ruby serait capable de dire si dans notre cas toutes sont nécessaires)

yum install gcc g++ make automake autoconf curl-devel openssl-devel zlib-devel httpd-devel apr-devel apr-util-devel sqlite-devel

yum install ruby-rdoc ruby-devel

Puis Fontforge

yum install fontforge

La commande wget récupère un fichier woff-code-latest.zip. Donc faites attention au répertoire dans lequel vous le récupérez. Je me suis mise dans home/html. Le fichier pèse 27 Ko

wget http://people.mozilla.com/~jkew/woff/woff-code-latest.zip

Ça s'est compliqué au moment de la commande suivante

unzip woff-code-latest.zip -d sfnt2woff && cd sfnt2woff && make && sudo mv sfnt2woff /usr/local/bin/

L'unzip a bien fonctionné. Mais la commande make échoue avec 2 erreurs : CC: Command not found et Error 127.

Un which cc me renvoie « no cc in (/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin:/root/bin) ».

J'ai beau exécuter

yum install gcc-c++

ou

yum groupinstall "Development tools"

Et ajouter « CC = gcc » ou « CC = g++ » au début du fichier sfnt2woff/Makefile afin que le système utilise g++ pour compiler.

Rien ne fonctionne…

Création des icônes

Pour créer les icônes, il va vous falloir un logiciel de dessin vectoriel (Illustrator ou Photoshop récents, Inkscape) pour générer les icônes au format SVG. Inkscape est un peu crispant au début car il n'utilise aucun des raccourcis clavier de Photoshop. Mais il présente l'avantage d'être gratuit et de gérer nativement le format SVG.

Inutile de vous casser la tête avec les couleurs, tout sera en noir. N'utilisez pas non plus de transparences.

Attention, vos créations doivent bien être converties en chemins (les « strokes » doivent être convertis en « fills »). Sous Inkscape, vous pouvez utiliser Chemin > Contour en chemin. Sinon vous risquez d'avoir des soucis à la conversion (les cercles ne seront pas vraiment ronds, vous aurez des effets de superposition bizarres).

A noter que les noms des classes sont basés sur le nom des fichiers.

Création de la fonticon

Placez-vous dans le répertoire contenant les fichiers SVG (mettons qu'il s'appelle /svg)

cd svg

Et lancez la génération

fontcustom compile

C'est quasi-instantané. Un sous-répertoire /fontcustom est créé.

Il contient une feuille de style nommée fontcustom.css et 4 autres fichiers (un ttf, un eot, un woff et un svg) dont le nom commence par fontcustom puis un hash unique qui change à chaque génération.

Plus un fichier fontcustom-preview.html qui vous permet d'avoir un échantillon de chaque classe avec la correspondance entre son nom de class et son code unicode. Très pratique.

(on remarque au passage que les deux premiers logos n'ont pas suivi les guidelines de création de svg, d'où les effets de superposition incorrects)

Et si vous voulez ajouter de nouvelles icônes, Fontcustom se souviendra des unicodes déjà utilisés.

Fontcustom propose de nombreuses options pour personnaliser votre génération de fonticon… n'hésitez pas à les explorer !