Font Awesome – Quand l’iconographie devient l’allié de la performance

Screenshot_1.png

La performance, nous devrions toujours avoir ce mot à l’esprit, votre site peut être le plus beau du monde, utiliser les dernières technologies en matière d’animation, toute cette artillerie ne servira à rien si vos utilisateurs ne peuvent consulter rapidement le contenu de votre site.

Les technologies d’aujourd’hui permettent une optimisation de la performance sur plusieurs fronts et nous allons nous rendre sur l’un d’eux et passer en revue une police de caractère vraiment spectaculaire : Font Awesome.

Qu’est-ce que Font Awesome ?

Font Awesome est une police de caractère comme les nombreuses installées sur votre système, à la différence près qu’au lieu d’afficher les lettres de notre alphabet, elle affiche des pictogrammes représentant de nombreuses idées. Initialement conçue pour être utilisé avec Bootstrap, elle peut être importée sur tout type de projet.

Screenshot_2.png

Pourquoi l’utiliser ?

  • Font Awesome compte à ce jour 369 icônes disponibles.
  • Aucune couche Javascript nécessaire
  • Vous n’êtes plus dépendant d’un graphiste pour modifier la taille ou la couleur de vos icônes
  • Vous économiserez des requêtes http.
  • Parfaitement adapté aux écrans à fort densité de pixel et à n’importe quelle résolution grâce aux formats SVG.
  • La dernière version est compatible avec Internet Explorer à partir de sa version 8
  • Et last but not least: c’est gratuit ^^.

Installation

Installation via le CDN de Bootstrap

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
rel="stylesheet">

Cette méthode à l’avantage de vous affranchir d’installer les polices de caractère dans l’arborescence de votre projet.

Utiliser seulement la propriété font-family avec la valeur ‘FontAwesome’
Screenshot_13.png

Je vous laisse découvrir les autres méthodes d’installation

Focus sur le format SVG

Acronyme de Scalable Vector Graphics, le format SVG est un ensemble de données décrivant des ensembles de graphiques vectoriels.

Code source d'un graphique d'étude

Screenshot_4.png

Représentation dans le navigateur

Screenshot_3.png

Il peut être également utilisé pour réaliser toutes formes ayant besoin d’être redimensionné sans aucune perte de qualité (exemple : logo ou icône).

Image au format SVG, redimensionné à environ 3 fois sa taille et sans aucune perte de qualité.

netap.png

Image au format bitmap, même traitement…

netap2.png

Les fichiers SVG peuvent rapidement devenir très lourds.
Stéphanie Walter de l’agence Alsacréation nous explique comment réduire le poids d’une image SVG d’Illustrator à l’export final.

Prise en charge du .svg par les navigateurs

Exemple d’utilisation

Utilisation des Font Awesome sur le site de la ligne 15 Est du métro parisien
Screenshot_8.png

Collections de Font Icon

Glyphicons

Entypo

Fontelico

Iconic

Modern Pictograms

Meteocon

MFG Labs

Laisser un commentaire

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

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.