Paul FLYE SAINTE MARIE

Veuillez patientez jusqu'au chargement complet de la page ...

Font Awesome 5 !

« L’innovation systématique requiert la volonté de considérer le changement comme une opportunité. » – Peter Drucker

Bonjour à tous,

Font Awesome 5 est sorti et c’est une très bonne nouvelle ! 

https://fontawesome.com/

Pour les personnes qui ne développe pas ou pour ceux qui ne connaissent pas : Font Awesome est une bibliothèque d’icônes utilisables gratuitement pour votre site internet.
Nous en sommes à la version 5 du projet et que de chemin parcouru depuis le début.

Font Awesome a pour particularité de rendre ces icônes accessible via un simple fichier CSS et un fichier de police (Fichier woff) depuis la version 2 de la bibliothèque.
Cette bibliothèque avait la particularité d’être gratuite et disponible à tous !
Et pour simplifier le tout, Font Awesome propose même d’héberger le fichier CSS et le fichier de police directement sur leur serveur.

Ce qui permet à chaque développeur d’utiliser directement le fichier CSS et d’utiliser plus de 700 icônes via un code très simple.
Avec la version 5 de Font Awesome, vous avez toujours la possibilité d’utiliser un fichier CSS pour obtenir encore plus d’icônes … mais, vous avez également la possibilité d’utiliser un fichier JavaScript permettant d’intégrer à votre page HTML : des icônes aux formats SVG.

Et si vous désirez obtenir plus de 2000 icônes : des icônes exclusifs, des versions alternatives des icônes gratuites : vous pouvez acheter une licence pro standard : https://fontawesome.com/pro#license

Font Awesome Logo

Pour ceux qui ne connaissent pas le format SVG :

Le Scalable Vector Graphics (en français « graphique vectoriel adaptable »), ou SVG, est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML. – Wikipédia

Ce qui veut dire que les icônes ne sont pas des images, mais du code !
Cela peut paraitre étrange, mais cela veut dire beaucoup de choses pour les développeurs web…

Le SVG, cela permet :

  • D’avoir des icônes adaptés à toute taille et au responsive design.
  • Pouvoir appliquer des propriétés CSS aux icônes comme à du texte.
  • D’avoir des icônes beaucoup plus légère qu’une image classique.
  • D’avoir le code (qui gère les icônes) compressés.
  • Par rapport à une image, on peut ajouter des informations claires concernant le SVG : un titre et une description et bien d’autres informations.

Ce qui fait que le SVG … et donc Font Awesome 5 optimise encore un peu plus votre SEO.
Car la méthode précédente avec le fichier CSS et le fichier police ne permettait pas à Google de pouvoir indexer correctement les icônes avec le site.

Ce qui est aussi extraordinaire, c’est que Font Awesome suit l’actualité et rajoute des icônes au fur et à mesure.
Exemple : un site devient populaire … et donc son icône aussi.
Ainsi, d’ici peu, une icône va être ajoutée à la liste des icônes disponibles dans Font Awesome.

Un échantillon ? Rien de plus facile : https://fontawesome.com/icons?d=gallery

Font Awesome et moi : Une véritable histoire d’

J’ai mis à jour ce site 🙂 Oui, mon site utilise maintenant Font Awesome 5 !
Il avait auparavant la version 4.7.0 et j’ai dû revoir le code de l’ensemble des mes pages / articles pour pouvoir faire fonctionner correctement cette nouvelle version.
Ce ne fut pas simple et cela m’a pris du temps, mais ce fut bougrement intéressant.

Si vous avez la problématique de passer de Font Awesome 4 à Font Awesome 5 : Lisez cet article.

Constat après la transformation :
Je me suis beaucoup amusé de cette transformation et je pense pouvoir ajouter d’ici peu, quelques fonctionnalités au site qui pourront le rendre, je l’espère, encore plus intéressant.

Prenez le temps de découvrir la vidéo de promotion du financement participatif KickStarter de Font Awesome : un must see !

Je profite de cet article pour remercier les créateurs de  Font Awesome.
Vous êtes incroyable et votre travail mérite la considération de tous les développeurs web !

De la part d’un Fan : Merci pour tout. 

Catégorie(s) : Site, Technologie

1 Commentaire(s)

Laisser un commentaire

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


*