Dossier : Comment intégrer les « icons fonts »

Vous le savez, le nerf de la guerre au goût de jour c’est la rapidité de chargement d’un site, son optimisation et sa réactivité. Le but de cet article n’est pas du tout de vous apprendre les rudiments du référencement, d’autres blogs  sur cette thématique le font très bien et cela chaque jour. Même si je peux vous parler longuement comment améliorer votre positionnement, la hiérarchie de vos informations ou encore comment optimiser votre site pour le web, je ne m’étendrais pas sur ce point qui ne fait pas partie de ma charte éditoriale. Le but de ce dossier est donc de parler des « icons fonts ». Je vais essayer de vous expliquer comment et pourquoi c’est important de connaitre cette technologie, comment l’utiliser et surtout dans quel but.

Qu’est ce que les « icons fonts » ou  la typographie d’icônes ?

Les « Icons fonts » sont des icônes inclus dans une font. Chaque icone correspond à un symbole qui pourra être intégré dans un site internet, facilement, en utilisant le CSS3 et sa balise @font-face. Les icônes font sont donc des symboles vectoriels personnalisables à souhait qui peuvent être manipulés grâce à des attributs css et intégrés où vous le souhaitez.

Quels sont les avantages des icons fonts ?

A contrario des icônes de types « images » que l’on a l’habitude d’intégrer dans notre site, les icônes typographiques ont bien plus d’avantages que l’on ne peut croire. Vous le savez, à chaque image que vous ajoutez sur votre site, une requête est exécutée pour pouvoir l’afficher correctement. Outre le poids conséquent si vous ne les optimisez pas, vous aurez 1 requête par icône. Le chargement de votre site sera donc ralenti. Il existe bien sûr déjà une solution qui consiste à faire la moitié du chemin et réduire le temps de chargement grâce aux « Sprites ». Petit aparté sur les sprites qui méritent quand même d’être évoquées. Les Sprites sont un « pack » d’icônes regroupées sur une seule image. Au chargement de votre site, il n’effectue qu’une seule requête pour charger cette image contenant toutes vos icônes (chose faite par exemple pour les icônes des réseaux sociaux en haut de page de ce blog). Une fois l’image créée et chargée, il ne vous reste plus qu’a positionner en CSS le background-position à l’endroit voulu de votre sprite. Un bon compromis d’optimisation, sachant qu’en plus on peut y ajouter des petits effets sympathiques, rapide et compatible avec les navigateurs récents. Revenons aux icons fonts, le fait de faire ce choix vous apportera des avantages non négligeables suivant :

• Une évolution facile sans avoir à passer par un éditeur d’images
• Une coloration facile et rapide en CSS
• Inclure des ombres portées
• Une bonne compatibilité sur les navigateurs (même ie6…)
• L’ajout d’effets simple et rapide en CSS
• une déclinaison complète au niveau des tailles sans perte de qualité
• de la transparence pour une intégration parfaite avec votre graphisme
• Un poids moindre

Autant d’avantages donc qui va vous permettre de perdre du temps mais d’en gagner par la suite pour des modifications ou des personnalisations. Juste un exemple pour vous montrer la différence de poids entre une sprite d’icônes dite classique et une iconic. Globalement, on pourrait passer de 650ko à 11ko au chargement. Un ratio non-négligeable.

Les inconvénients des icons fonts

Bien évidemment, toute technologie possède aussi ses inconvénients, malheureusement…

 Télécharger des icons fonts gratuites

Commençons par trouver où vous pouvez trouver des icons fonts gratuites sur le web pour que vous puissiez les sélectionner, les télécharger et les intégrer.

icons fonts – entypo

icons fonts – tenbytwenty

icons fonts – typicons

icons fonts – iconic

icons fonts – genericons

icons fonts – ligature

icons fonts – icomoon

icons fonts – pictonic

Comment utiliser les polices d’icônes

La première étape dans l’utilisation des polices d’icônes, il faut tout d’abord les télécharger grâce à la liste non-exhaustive ci-dessus. Il en existe bien sûr bien d’autres mais les plus connus y sont présents. Globalement et sans trop rentrer dans le détail du code, il existe plusieurs façons d’intégrer vos icônes, la principale chose à faire est d’importer les typographies dans votre code. Après les avoir uploadés sur votre server dans un dossier précis, vous pouvez

• intégrer votre icone en html
• Utiliser les classes CSS
• Utiliser l’attribut data-icon

Voilà un exemple avec le site icomoon où vous associez, en utilisant leur app, des symboles à des caractères (là où vous voyez les petits « ? » pour le moment). Cela permettra de faciliter l’intégration. Une fois téléchargé, vous aurez une CSS et un dossier font avec le contenu. Vous verrez dans la CSS un attribut @font-face avec 4 types de fonts : .eot, .svg, .woff et .ttf qui vous permettra d’être compatible avec tous les navigateurs. Il ne vous reste plus qu’à personnaliser et intégrer tout cela pour avoir votre icone adéquat !