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.
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’
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
Représentation dans le navigateur
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é.
Image au format bitmap, même traitement…
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
