Comment transformer les icônes de votre site en typographie pour le web ?

Le temps de chargement d’un site internet, cela vous parle ? Si oui, vous êtes au bon endroit, si vous ne vous en souciez pas, je pense qu’il est temps pour vous de vous pencher sur la question.

Alors pourquoi transformer vos icônes en une « font « pour votre site internet ?

Il y a bien évidemment plusieurs raisons à cela. C’est une des solutions. Ce n’est ni la meilleure, ni la moins bonne, c’est UNE solution que vous pouvez mettre en place pour améliorer votre site web. Comme je le dis souvent, il n’y a pas de meilleure façon de faire, il y a une façon adaptée pour une problématique (1 client, 1 projet, 1 besoin…)

Quand vous chargez de multiples images pour afficher par exemple vos icônes de réseaux sociaux, vos icônes de menu ou tout autre contenu statique, chaque image est appelée en HTML sur votre server. Du coup, cela génère du code supplémentaire et des allers/retours supplémentaires entre votre serveur et la machine de l’internaute. On est d’accord que cela se joue à quelques dixièmes de seconde mais tout est important 🙂 . Les conséquences sont les suivantes :

• Un temps de chargement plus long (plus de requêtes = plus de temps de chargement)
• Un temps de chargement encore plus long (plus d’images à charger = plus de datas à télécharger)
• Un trafic serveur augmenté (plus de « tout » à charger = plus de trafic de datas générés

Pour régler en partie ces problématiques, il suffit dont de générer 1 seul fichier de typographie qui inclut l’ensemble des icônes. voir plus bas pour la réalisation.

D’un point de vue référencement

Le fait de n’avoir qu’un seul fichier à charger, permet de gagner clairement en temps de chargement. Pour peut que vous vous y connaissiez un peu, vous pouvez aussi mettre ce chargement « en cache » de votre site. Cela aura pour conséquence de n’avoir qu’un seul téléchargement à la première connexion. Par la suite, c’est autant de ressources en moins sur chaque page visitée.

Petit plus donc pour le référencement.

Inconvénient : Cela fait des images en moins à indexer dans google. Maintenant, est-ce qu’une icône Facebook, une icône de mail ou de panier a un intérêt ? À vous de juger 🙂

D’un point de vue personnalisation

L’intérêt d’une typographie c’est qu’il est possible de le personnaliser sans soucis. Que ce soit la couleur, la taille ou encore le « rétina ready » tout est faisable ! Vous appelez dans votre feuille de style l’icône souhaitée comme si c’était un caractère classique (une lettre, un caractère spécial -> € $ @ ect…) et vous lui donnez le style que vous souhaitez.

ex : une couleur (font-color), une taille (font-size), ect…

D’un point de vue faisabilité.

Alors comment on fait ? Je vais vous donner une des solutions qui existent. Vous pouvez créer facilement votre propre « font » avec Icomoon.io/app/. Vous avez 2 solutions à votre disposition :

• Soit vous utilisez une de leurs librairies. +500 icônes disponibles à sélectionner pour créer votre « font ».
• Soit vous créez la vôtre. Voici ci-dessous une des librairies que j’ai créée pour un client

Pour créer la vôtre, c’est simple  :

• Créez votre compte,
• Créez un projet
• Sélectionnez les icônes souhaitées dans la librairie de base
• Importez vos propres icônes (Format SVG)
• et générez votre font !

Il vous suffit après d’appelez dans votre CSS l’icône en question. Par exemple le téléphone avec /e942 ou /e602 pour facebook

Voilà ! C’est aussi simple que cela. Bien évidemment il existe bien d’autres solutions comme les sprites, les CDN, et autres joyeusetés. C’est d’ailleurs pour cela que j’adore mon métier, il y a toujours 50 000 solutions pour arriver aux mêmes résultats : Que le clients soit satisfait avec un site propre, rapide et optimisé 🙂