Cet article a pour objectif de vous présenter comment utiliser une police d’Icônes comme Font Awesome sur votre site Web (Mise à jour pour Font Awesome 5).
Le principe
Il est de plus en plus courant d’utiliser des polices personnalisées sur son site web, pour cela il suffit de charger des fichiers de polices avec l’attribut CSS font-face. Cette possibilité d’insertion de polices personnalisées est également exploitée afin d’insérer des icônes.
Les icônes étant intégrées via une police de caractère, il est alors possible d’appliquer les attributs CSS classiques de mise en forme de caractère comme font-size (taille des caractères) ou color (couleur des caractères).
Bootstrap ou jQuery UI intègre des polices de caractères utilisées notamment pour personnaliser les boutons. Mais il est possible d’utiliser de type de police de manière complètement autonome et notamment la police Font Awesome qui est probablement la plus connue et à été créé initialement pour Bootstrap.
Installation de Font Awesome
La première chose à faire est d’ajouter Font Awesome à votre site. Pour cela, vous avez deux méthodes à votre disposition :
- Stocker les fichiers sur votre hébergeur ;
- Utiliser un CDN.
Stockage des fichiers sur votre hébergeur
Rendez-vous sur le site de Font Awesome et téléchargez les fichiers : https://fontawesome.com
Décompressez l’archive zippée, ouvrez le dossier web-fonts-with-css et retrouvez le dossier css et le dossier webfonts.
Placez les deux dossiers css et webfonts sur votre espace d’hébergement. Pour cela, vous pouvez utiliser un client FTP comme Filezilla.
Associez la feuille de style fontawesome-all.css dans l’en-tête de votre page web en utilisant la balise <link /> comme dans l’exemple ci-dessous. Évidemment, vous devez adapter l’attribut href à l’arborescence des fichiers de votre site. Dans notre exemple, les deux dossiers de la question précédente ont été déposés sur le serveur dans le dossier fontawesome lui-même dans le dossier library.
<html>
<head>
...
<link rel="stylesheet" href="library/fontawesome/css/fontawesome-all.css" type="text/css" />
...
</head>Utilisation d’un CDN
Un Content Delivery Networks ou CDN est constitué d’ordinateurs reliés en réseau qui servent à mettre des fichiers à disposition d’utilisateurs. On peut par exemple y déposer des images ou des feuilles de styles.
En utilisant un CDN, nous pouvons économiser de la bande passante pour le serveur et géolocaliser les utilisateurs afin d’optimiser le téléchargement en utilisant le serveur CDN le plus proche. Lorsque l’on utilise des librairies connues, nous allons même bénéficier de la mise en cache de nos navigateurs qui pourront utiliser des fichiers pour plusieurs sites sans avoir à les re-télécharger. Il s’agit donc d’une solution plus rapide pour la distribution de fichiers.
Pour installer Font Awesome via un CDN, il suffit d’ajouter le fichier CSS en utilisant l’adresse du CDN comme dans l’exemple ci-dessous. Ce code permet d’utiliser la version 5.0.8, en fonction des mises à jour de Font Awesome, vous pourrez adapter le lien.
<html>
<head>
...
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
...
</head>Utiliser des icônes
Le principe d’utilisation de ce type de polices d’icônes est de d’insérer des icônes en CSS en détournant les balises inexploitées aujourd’hui et non-sémantiques <i></i>. Il suffit donc d’insérer une de ces balises avec les classes CSS adaptées. Par exemple, le code suivant permet d’insérer une icône de carnet d’adresses <i class="fas fa-address-book">
Pour connaître les codes correspondants à chaque icône, il faudra consulter la liste sur le site https://fontawesome.com/icons?d=gallery.
Vous trouverez toute l’aide nécessaire pour en savoir plus sur la syntaxe et les possibilités de Font Awesome sur la page suivante : https://fontawesome.com/how-to-use
Amélioration des performances
Si vous avez besoin de deux ou trois icônes seulement, on peut se poser la question de l’intérêt de charger toute une police de caractères. La solution se trouve dans l’utilisation d’un site tel que IcoMoon. En effet, cet outil vous propose de personnaliser votre police de caractères en sélectionnant uniquement les caractères que vous souhaitez utiliser. IcoMoon vous permet par ailleurs de faire votre choix d’icônes dans plusieurs polices, ce qui vous offre pas énormément de possibilités…
Sauf mention contraire*, l'article Utiliser des polices d’icones pour votre site Web et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons
Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.