Font Awesome

Préambule

Font Awesome est une bibliothèque d'icônes vectorielles de super qualité en CSS. Il s'agit d'un service payant (abonnement annuel) mais on peut accéder aux 2060 icônes gratuites en suivant cette méthode.

Les icones font parties de groupes tels que :

Regular (contours)
Solid (pleines)
Brands (marques)

Liste des icônes : https://fontawesome.com/v6/search?ic=free&o=r

Installation

Ajouter cette ligne dans le <head> de la page HTML :

<link rel="stylesheet" href="https://inoki.s3.eu-west-3.amazonaws.com/css/fontawesome-6-5-1/css/all.min.css">

ou télécharger et héberger le fichier : https://inoki.s3.eu-west-3.amazonaws.com/css/fontawesome-6-5-1/css/all.min.css

Utilisation

Pour afficher une icone, il s'agit d'un peu de html (on se sert de la balise <i> qui est obsolète :

<i class="fas fa-house"></i>

On utilise donc des classes commençant par fa pour le style d'icone (ex: fas pour Solid) et le motif (ex: fa-house).

On peut ajouter des classes pour :

la taille
l'alignement
l'utilisation dans une liste
la rotation
l'animation

Documentation : https://docs.fontawesome.com/web/style