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.  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 tel les langues asiates ou les anciens hiéroglyphes. Il s’agit d’idées-symboles, on est encore loin d’en faire des phrases puisque proposer des rébus au prospect serait contre-productif. Leur rôle est d’avantage de marquer et de résumer en une image un court texte.

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®, permet en effet de produire de tels graphismes. Comparer ceci avec ce qui se fait en pixels prendrait un article entier, nulle besoin donc d’entrer dans les détails. En deux mots, les avantages du vectoriels sont:

-Formes déduites de points de coordonnées vs. tous les points calculés (pixels).

L’avantage: Très léger et déformable à toutes les échelles et tous les usages (web, print…). Illustrator (Adobe) est le logiciel de graphismes vectoriels de référence pour la plupart des graphistes, une vraie fabrique à logos. Il se prête dont très bien à faire des pictogrammes, et des fontes de caractères. En matière de fontes pictogrammes, une police qui dira bien des choses aux infographistes old school: Windings , qui était longtemps le moyen d’intégrer des pictogrammes standards dans des présentation à l’ère de l’imprimé.

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

  1. Un visuel déjà bien stylisé et étudié (pourquoi réinventer la roue?)
  2. Léger
  3. Déformable à toutes les échelles (Vectoriel on vous dit… ;))
  4. On peut y appliquer les même tailles, couleurs, et effets que les fontes (magie du CSS)
  5. S’affiche sans surprise sur desktop, tablette et mobile (responsive)
  6. 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  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 le carousel, 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:

  1. Une fonte pas acceptée par tous les navigateurs (Versions anciennes ou »exotiques »)
  2. Sur un site internet avec déclaration des ressources localement, il faudra veiller à les mettre à jour. Et ça reste une librairie importante à charger pour parfois trois pictogrammes.
  3. Du choix… mais pas tout. Rien de plus rageant que d’avoir trouvé toutes ses icônes sauf une*.
  4. 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 ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *