17/02/218: Tout savoir sur Fonts Awesome

Vous avez sans doute vu (à moins que vous viviez dans une grotte), des sites internets récents afficher des pictogrammes avec l'énoncé de leurs prestations et offres, qui vous semblent familiers de site en site...

Il y a fort a parier qu'il s'agit de Fonts Awesome. [icon name="external-link-square" class="" unprefixed_class=""] C'est la librairie de pictogrammes vectoriels la plus utilisée actuellement. Avec le développement des sites internets responsive et leur storytelling (on scrolle, on scrolle !).

Storytelling et pictogrammes

Invention du Web Marketing qui remonte aux années 2000, le "storytelling" impose une lecture du site selon le précepte de retenir le visiteur en lui faisant comprendre la solution à son/ses problème(s) en 3 secondes. Le séduire, le convaincre, puis le rassurer, et l'inviter à une action au bout du scroll. Les pages d'accueil des sites récents sont donc "tapantes" volontiers visuelles (grandes images ou vidéos, gens jeunes et souriants...) et quelques mots-clés qui identifient immédiatement la raison d'être du site, "ce ce que l'on fait". Plus en profondeur, invariablement on retrouve l'offre, des chiffres animés sur le nombre de prestations délivrées, clients satisfaits, etc., l'équipe, les références clients, un "call to action" boutons bien visible pour aller vers les tarifs et offres détaillées, et le formulaire de contact et les coordonnées en bas de page.

Le rôle des pictogrammes

Pour souligner l'offre et/ou les points forts, des icônes précèdent le texte court qui les accompagne. Des pictogrammes qui participent à cette idée de décrire au client ce dont on parle de la manière la plus rapide possible. Habitués que nous sommes au code de la route, puis aux mobiles et à leurs hordes d'applications et de fonctionnalités, nous nous sommes accoutumés à ces petits graphiques très stylisés, et à ses standards. Ils sont entrés durablement dans nos vies, presque au titre d'un langage parallèle, une sorte de langage visuel alternatif à l'alphabet telles les langues asiates ou les anciens hiéroglyphes. Il s'agit d'idées-symboles, un mot=une image, puisque proposer des rébus aux visiteurs serait contre-productif. Leur rôle est d'avantage de résumer visuellement un point fort à retenir.

Mais on peut les utiliser aussi comme:

Informations complémentaires (ex. logo de banque ou de carte sur un site E-Commerce)
Réseaux sociaux et applications disponibles
Symboles associés à un texte dans un bouton
Symboles animés d'action (ex. spinner de chargement)
Icônes d'interface (UX design)

Un peu de technique

Les pictogrammes vectoriels ne sont pas nouveaux. Le concept remonte aux débuts de l'informatique. Un logiciel bien connu d'Adobe®, le géant du graphisme pro, Illustrator®, permettait en effet de produire de tels graphismes, en vectoriel. Comparer le vectoriel avec ce qui se fait en pixels prendrait un article entier, nul besoin donc d'entrer dans les détails. En deux mots, les avantages du vectoriel sont:

-Formes déduites de points de coordonnées vs. tous les points calculés (pixels). Le vectoriel (souvent ensuite décliné en .svg) est très léger et déformable à toutes les échelles et tous les usages (web, print...). Illustrator (Adobe) est le logiciel de graphisme vectoriel de référence, une vraie fabrique à logos. Il se prête donc très bien pour des pictogrammes, et fontes de caractères. En matière de fontes justement, une police qui dira bien des choses aux infographistes old school: Windings [icon name="external-link" class="" unprefixed_class=""], fut longtemps le moyen d'intégrer des pictogrammes standards dans des présentations à l'ère de l'imprimé.

Pour le web, l'idée d'utiliser une fonte coule de source:

Un visuel déjà bien stylisé et étudié (pourquoi réinventer la roue?)
Léger
Déformable à toutes les échelles (Vectoriel on vous dit... ;))
On peut y appliquer les même tailles, couleurs, et effets que les fontes (magie du CSS)
S'affiche sans surprise sur desktop, tablette et mobile (responsive)
Compatible avec l'agrandissement pour mal-voyants

Les avantages de Fonts Awesome

C'est une des bibliothèques les plus utilisées. De fait, elle reçoit de fréquentes nouvelles requêtes et introduit de nouveaux pictogrammes grâce à ses nombreuses contributions. Cette fonte utilise le standard .svg pour le vectoriel.

Son catalogue compte actuellement 2300+ références dans tous les domaines.
Lorsqu'on travaille en code, il suffit parfois de deviner le nom de l'icône pour tomber juste.
La mise en oeuvre est simple et souple: Le code de base dans un site ressemble à: <i class="fa fa-object fa-lg"></i>
Sur un CMS comme wordpress, un simple shortcode suffit (une fois le plugin installé)
Outre des paramétrages CSS, on peut y appliquer des effets dans le code de déclaration:

<i></i> est une convention html pour "insert". Après la classe qui déclare l'objet (ici "fa-objet") on y applique une référence de taille "fa-lg" pour "Fonts Awesome - Large". Les autres mesures sont exprimées en "x" (agrandi x fois) comme dans "fa-7x".

Cerise sur le gâteau (clin d'oeil à la vidéo de pâtisserie hilarante [icon name="youtube" class="" unprefixed_class=""] présentant la nouvelle version) on peut combiner les icônes et leur appliquer des animations.

Un exemple combinant un peut tout:

<i class="fas fa-spinner fa-pulsefa-7x"style="color:red"></i>

Les Graphistes au chômage !

-En effet cette nouvelle mode des sites internets privilégie les photos (de grande taille pour carousels, galeries et autres), et les graphismes vectoriels tels que ces pictogrammes. Les illustrations et graphismes "à l'ancienne" en .gif et .png ont vécus. La vitesse d'affichage et l'impact via la standardisation ont eu raison des derniers infographistes se risquant encore à proposer des choses pour internet. Les infographies n'ont plus le vent en poupe et les graphismes personnalisés appartiennent au passé, de même que les animations en flash. L'époque n'est plus au graphisme.Le revers de la médaille est qu'on perd également singulièrement en personnalité, chaque site se ressemblant car utilisant les mêmes templates bootstrap dictés par le storytelling à l'américaine... et les même librairies de pictogrammes. Et le CSS est Roi pour tenter de se différencier.

Inconvénients Utiliser ce genre de solution pour son site semble couler de source pour ce qui est de la flexibilité. Mais des inconvénients existent cependant:

Fonte pas acceptée par tous les navigateurs (anciennes versions notamment)
Doivent être mis à jour.
Une librairie importante à charger pour parfois trois pictogrammes.
Ne couvre pas tout. Rien de plus rageant que d'avoir trouvé toutes ses icônes sauf une*.
Manque d'originalité. Plus difficile de se démarquer avec ces icônes "bateau".

*Derniers manques en date: La réalité virtuelle, le panier... et des icônes d'applications et de marques comme scoopit. Voir toutes les requêtes https://github.com/FortAwesome/Font-Awesome/issues

Alternatives à Fonts Awesome

https://material.io/icons/
https://css-tricks.com/icon-fonts-vs-svg/
http://fontastic.me/ (9000 icônes)
https://github.com/DiemenDesign/LibreICONS
http://glyphicons.com/
http://ionicons.com/
https://www.iconfinder.com/
http://zavoloklom.github.io/material-design-iconic-font/

Et bien sûr vous pouvez utiliser vos propres icônes exportées en .svg avec un peu de javascript.
Et vous, utilisez-vous des icônes vectoriels. Si oui, de quelle bibliothèque et avec quels effets ?