Utiliser une police d'icônes peut vous permettre d'avoir à disposition une foule d'icônes pour guider la navigation sur votre site et illustrer vos pages. FontAwesome fait partie des polices d'icônes les plus populaires et dans cet article, je vous propose d'apprendre à installer cette police sur votre site pour pouvoir l'utiliser ensuite dans votre design ou vos mises en page.
Qu'est-ce qu'une police d'icônes ?
Une police d'icônes est un type de police de caractères qui, au lieu de proposer des lettres et des chiffres, se compose d'icônes. Vous pouvez donc utiliser ces polices pour ajouter à votre site des icônes graphiques faciles à redimensionner et personnaliser (couleur, effet d'ombrage, animation...).
Elles peuvent s'intégrer au template de votre site lui-même, par exemple pour afficher des icônes de réseaux sociaux, ou vous servir à mettre en valeur certains éléments dans la mise en forme d'une page, par exemple pour marquer de manière visuelle les différents champs d'un formulaire de contact ou vos atouts commerciaux comme le fait ici MeilleurTaux.com :
FontAwesome, Glyphicons, Ionicons, Typicons ou encore IcoMoon figurent parmi les polices d'icônes populaires et proposent un éventail d'icônes incluant les logos des réseaux sociaux et les symboles courants (flèches, graphes, étoiles, crayons, téléphone, etc). Souvent, ces polices comportent une version gratuite et offrent la possibilité d'accéder à un choix d'icônes plus important en payant.
Quels sont les avantages d'une police d'icônes comme FontAwesome ?
Déjà, vous vous demandez peut-être pourquoi utiliser une police d'icônes et non de simples images que vous choisissez en fonction du style graphique que vous appréciez ? Les polices d'icônes offrent plusieurs avantages.
- Scalabilité - Les icônes sont vectorielles, ce qui signifie qu'elles peuvent être réduites ou agrandies sans aucune perte de qualité et en conservant toute leur netteté, par opposition à une image qui peut devenir illisible ou pixellisée quand on la redimensionne.
- Performance web - Critère important à tous points de vue puisque cela joue aussi bien sur le référencement naturel que sur la conversion et l'expérience utilisateur, le temps de chargement est souvent meilleur avec une police d'icônes car on se contente de charger le fichier de la police au lieu de charger une multitude de fichiers images différents. C'est moins de requêtes HTTP nécessaires pour atteindre le chargement complet d'une page, donc une performance accrue dans la plupart des cas.
- Compatibilité - Ces polices permettent de conserver une apparence uniforme d'un appareil à l'autre et d'un navigateur à l'autre et sont compatibles avec la plupart des navigateurs modernes, ce qui permet à un site de bien.
- Personnalisation - On peut aisément modifier la couleur ou la taille des icônes à l'aide du langage CSS et y ajouter tous les effets permis par ce langage... alors qu'en utilisant des images, il faudrait concevoir autant de versions de l'image que de variantes souhaitées.
- Evolutivité - Lorsque l'on utilise des images, il faut les modifier une par une si l'on souhaite faire évoluer son design. Avec une police d'icônes, on peut mettre à jour la police en un clin d'oeil pour obtenir la dernière version.
- Accessibilité - Les icônes de police peuvent être rendues accessibles aux lecteurs d'écran grâce à l'ajout d'attributs ARIA (Accessible Rich Internet Applications) ou de textes alternatifs, ce qui peut être un atout pour l'accessibilité de votre site.
La police d'icônes FontAwesome figure parmi les plus plébiscitées pour une multitude de raisons, à commencer par la vaste gamme d'icônes qu'elle propose : la version Pro en compte plusieurs dizaines de milliers, tandis qu'il y en a quelques milliers accessibles dans la version gratuite. De quoi bénéficier aussi bien des icônes classiques incontournables que de visuels un peu plus originaux, dans des styles eux aussi relativement variés (plus ou moins légers, gras, etc).
FontAwesome présente aussi l'avantage d'évoluer en permanence : la police est régulièrement mise à jour, enrichie de nouvelles icônes pour s'adapter aux évolutions de la société et du design. C'est un bon gage de fiabilité et de robustesse dans le temps.
Elle est compatible avec une foule de navigateurs, peut s'intégrer à des frameworks et bibliothèques populaires comme Bootstrap, React ou Angular. Elle permet aussi d'utiliser SVG et JavaScript pour améliorer la performance lors de l'usage répété d'icônes sur une page, des points forts qui intéresseront les développeurs (vous pouvez jeter un œil à cet article en anglais pour mieux comprendre l'intérêt du SVG).
C'est aussi une "police pour tous" : on trouve aussi bien des formules gratuites que payantes, des solutions d'intégration avancées ou grand public... et il existe une communauté bien active autour de FontAwesome qui vous permettra de trouver facilement de l'aide et de l'inspiration en ligne.
Quelles solutions pour intégrer FontAwesome sur son site ?
FontAwesome peut être intégré de plusieurs manières sur un site web mais les deux plus courantes sont l'intégration à l'aide d'un kit prêt à l'emploi... et l'intégration "manuelle" en ajoutant les fichiers de la police à son thème et en les hébergeant sur son propre serveur. Quelle différence entre les deux ?
L'ajout du kit est plus simple et rapide, juste quelques cases à cocher pour préparer son kit puis une ligne de code à copier sur votre site et vous disposez déjà des icônes prêtes à être utilisées. Il n'y a aucune maintenance à faire, les mises à jour sont automatiques. En revanche, cela implique que votre site se connecte à FontAwesome pour charger les icônes (donc un peu plus "coûteux" en termes de performance web) et l'usage est limité à 10000 pages vues par mois. On y arrive très vite !
Par comparaison, l'hébergement manuel implique de télécharger vous-même les fichiers FontAwesome et de les héberger sur votre propre serveur. Vous réduisez ainsi la dépendance à une source externe mais il faut en contrepartie gérer vous-même les mises à jour et la configuration.
Sachez qu'il existe également un plugin WordPress gratuit pour insérer facilement des icônes sur un site WordPress mais il n'est pas très bien évalué à l'heure où j'écris cet article, les utilisateurs signalant de nombreux bugs et incompatibilités.
Utiliser FontAwesome avec un kit prêt à l'emploi
Si vous optez pour l'intégration à l'aide d'un kit, vous devez d'abord demander à recevoir un kit sur le site de FontAwesome en entrant votre adresse e-mail et en acceptant les conditions générales.
Une fois votre compte validé, vous pouvez créer un kit dans la rubrique dédiée en cliquant sur le bouton "Add New Kit". Un kit représente un ensemble d'icônes avec une configuration déterminée, utilisé sur un panel de sites bien défini.
Vous devez ensuite ajuster les paramètres du kit : le nommer, choisir entre les icônes gratuites ou Pro, sélectionner la technologie souhaitée (Web Fonts ou SVG+JS). FontAwesome fournit quelques clés pour choisir, retenez que le SVG implique de mettre davantage les mains dans le code tandis que les WebFonts sont recommandées à ceux qui utilisent des CMS comme WordPress ou Squarespace, ou qui cherchent une compatibilité avec d'anciennes versions de la police d'icônes.
Vous pouvez ensuite choisir les styles souhaités et définir un "subset" (chargement intelligent des icônes utilisées uniquement). En version gratuite, FontAwesome charge tous les styles à l'intérieur d'un kit, il y a donc moins de souplesse en termes de performance car vous aurez tous les fichiers même si vous n'en utilisez qu'une partie.
Enfin, vous pouvez définir la version de FontAwesome que vous souhaitez utiliser (en général, la plus récente pour bénéficier des icônes les plus modernes) et choisir les domaines où vous allez utiliser le kit. Vous devez définir un domaine pour mieux contrôler l'utilisation de FontAwesome (les pages vues seront comptabilisées sur ce ou ces domaine(s) que vous définissez). Vous pouvez utiliser des astérisques si vous souhaitez couvrir plusieurs sous-domaines, par exemple "*.monsite.com" pour inclure aussi bien monsite.com que www.monsite.com que boutique.monsite.com.
Pour finir, il existe une case pour prendre en charge la compatibilité avec d'anciennes versions de FontAwesome (par exemple, si votre site utilisait déjà cette police et que vous faites une mise à jour), en cochant "Enable compatibility with older version"... et une case "Conflict Detection" qui permet de détecter des problèmes de compatibilité entre plusieurs versions de la police. L'outil de diagnostic travaille pendant 10 minutes après sauvegarde des paramètres, ce qui peut un peu ralentir votre site temporairement.
Une fois les réglages effectués, sauvegardez.
Vous pouvez alors récupérer le lien de votre kit FontAwesome. Il faut ensuite l'ajouter dans la balise
de chaque page ou template de votre site où vous souhaitez utiliser les icônes FontAwesome.
Sur WordPress par exemple, la balise <head> se trouve en général dans un fichier baptisé header.php situé dans le dossiers wp-content > themes puis le nom de votre thème ou thème enfant. Notez que si vous modifiez directement le thème principal du site sans utiliser le principe du thème enfant, vos personnalisations risquent d'être effacées en cas de mise à jour du thème.
Vous pouvez aussi ajouter la ligne de code via le fichier functions.php (lire ici comment modifier functions.php), par exemple grâce à cette fonction :
// ==================================================================
// Ajout de code dans le header
// ==================================================================
add_action( 'wp_head', 'codeintheheader', 1 );
function codeintheheader() { ?>CODE DE VOTRE KIT ICI
<?php
}
Pour plus d'informations, vous pouvez aussi vous référer à la documentation de FontAwesome sur l'utilisation d'un kit.
Héberger la police d'icônes FontAwesome sur son site
Cette solution vous donnera plus de flexibilité. Vous devez d'abord télécharger les fichiers de FontAwesome en cliquant sur "Free For Web" si c'est la version gratuite qui vous intéresse.
Décompressez l'archive téléchargée. Copiez les dossiers /webfonts et /css dans le répertoire des ressources statiques de votre thème ou template. Par exemple, sur WordPress, vous pourriez les placer dans le dossier wp-content > themes > nomdevotretheme > fonts > fontawesome ou à l'endroit où sont stockées les polices de votre thème s'il existe déjà un répertoire dédié.
Vous pouvez choisir de copier uniquement les fichiers que vous allez réellement utiliser. Souvent, vous aurez besoin a minima du fichier brands.css qui contient tous les logos (notamment ceux des réseaux sociaux), ainsi que du style solid.css qui est le style gratuit par défaut. Il vous faudra également le fichier fontawesome.css, qui contient les règles de style globales.
Chacun de ces fichiers est proposé dans une version minifiée (se terminant par .min.css), plus légère, que vous pouvez privilégier dans un souci de performance.
Il est très important de retenir le chemin du dossier où vous avez stocké les fichiers de FontAwesome. En effet, pour utiliser la police d'icônes, il est nécessaire d'ajouter dans la balise <head> de votre design le lien des fichiers en question. Par exemple, pour la version gratuite de FontAwesome :
<head>
<link href="https://www.monsite.com/wp-content/themes/montheme/fonts/fontawesome/css/fontawesome.min.css" rel="stylesheet"/>
<link href="https://www.monsite.com/wp-content/themes/montheme/fonts/fontawesome/css/brands.min.css" rel="stylesheet"/>
<link href="https://www.monsite.com/wp-content/themes/montheme/fonts/fontawesome/css/solid.min.css" rel="stylesheet"/>
</head>Sur WordPress, vous pouvez aussi insérer ce code via une fonction à ajouter dans le fichier functions.php (lire ici comment modifier functions.php).
// ==================================================================
// Ajout de code dans le header
// ==================================================================
add_action( 'wp_head', 'codeintheheader', 1 );
function codeintheheader() { ?> <link href="https://www.monsite.com/wp-content/themes/montheme/fonts/fontawesome/css/fontawesome.min.css" rel="stylesheet"/>
<link href="https://www.monsite.com/wp-content/themes/montheme/fonts/fontawesome/css/brands.min.css" rel="stylesheet"/>
<link href="https://www.monsite.com/wp-content/themes/montheme/fonts/fontawesome/css/solid.min.css" rel="stylesheet"/>
<?php
}
Pensez bien entendu à remplacer les liens vers chaque fichier css par le bon chemin correspondant à l'emplacement où vous avez stocké les fichiers.
Vous pouvez en savoir plus sur la procédure d'hébergement de FontAwesome sur le site officiel.
Comment afficher des icônes FontAwesome ?
Une fois que vous avez intégré les fichiers sur votre site, par le biais d'un kit ou en les hébergeant vous-même, comment afficher des icônes ? Il existe deux grands moyens de le faire : entrer le code HTML correspondant à l'icône (pratique pour un affichage ponctuel) ou faire apparaître l'icône en utilisant des pseudo-éléments en CSS (solution pratique pour automatiser l'utilisation d'une icône, par exemple dans une liste à puces).
Insérer des icônes à la demande
Pour insérer une icône, il faut d'abord trouver le nom de l'icône sur cette page. Recherchez le type d'icône que vous souhaitez, par exemple une roue ("gear").
Vous disposez ensuite d'options de filtrage, notamment en cliquant sur "Free" pour afficher uniquement les icônes de la version gratuite.
Cliquez sur celle qui vous intéresse, FontAwesome vous fournit alors le code HTML à insérer sur vos pages pour l'utiliser, dans ce cas :
<i class="fa-solid fa-gear"></i>
Il faut toujours répéter cette même structure, en remplaçant juste "gear" par le nom de l'icône qui vous intéresse et "solid" par le style. Par exemple, pour l'icône du réseau LinkedIn on écrira :
<i class="fa-brands fa-linkedin"></i>Ensuite, vous pouvez agir sur l'apparence de vos icônes et notamment :
- Modifier leur taille - Il suffit d'ajouter entre les guillemets fa-2x pour qu'elles doublent de volume, fa-3x pour qu'elles triplent de volume. On peut aller jusqu'à fa-10x. Exemple pour l'icône de la petite roue :
<i class="fa-solid fa-gear fa-3x"></i>
On peut également spécifier une taille tout en alignant verticalement l'icône avec l'élément auquel elle se rattache (par exemple, si l'icône apparaît sur un bouton cliquable) en utilisant des tailles prédéfinies de la plus petite à la plus grande : fa-2xs, fa-xs, fa-sm, fa-lg, fa-xl ou fa-2xl. - Faire pivoter les icônes - On peut aussi changer la position des icônes. Par exemple, ci-dessous je me suis amusée avec l'icône "child" (enfant). Il suffit de rajouter fa-rotate-XX (XX pouvant être 90°, 180° ou 270° de rotation). Par exemple :
<i class="fa-solid fa-child fa-3x fa-rotate-180"></i>
- Opter pour une symétrie - Quand une icône est asymétrique, vous pouvez effectuer une symétrie verticale (fa-flip-vertical), horizontale (fa-flip-horizontal) ou les deux (fa-flip-both).
Vous pouvez également animer les icônes avec toutes sortes de mouvements. Par exemple...
... faire battre un cœur :
<i class="fa-solid fa-heart fa-beat fa-3x"></i>
... faire tourner les icônes, avec fa-spin :
<i class="fa-solid fa-gear fa-3x fa-spin"></i>
... faire un effet de fondu :
<i class="fa-solid fa-triangle-exclamation fa-fade fa-3x"></i>
Vous pouvez retrouver d'autres options de mise en forme ici.
Bien entendu, dans la mesure où il s'agit d'une police, vous pouvez aussi en modifier la couleur par exemple.
Intégrer des icônes en CSS
On peut tout à fait intégrer des icônes de manière plus "durable" dans la feuille de style du site web. Imaginons par exemple que vous souhaitiez mettre en forme les puces d'une liste à puces non ordonnée sur tout le site, vous n'allez pas vous amuser à recopier à chaque fois l'icône de la puce désirée à la main.
Les pseudo-éléments CSS peuvent vous aider à automatiser un peu les choses : il s'agit d'un mot-clé que l'on ajoute à un sélecteur en CSS pour mettre en forme l'élément ciblé seulement selon certains critères. Par exemple li::before pour afficher quelque chose avant chaque élément d'une liste à puces.
Vous devez d'abord définir des propriétés communes à toutes les icônes, en ajoutant ce code à votre feuille de style (sur WordPress, il s'agit du fichier style.css situé dans le dossier de votre thème ou thème enfant) :
.icon::before {
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
Ensuite, vous allez configurer l'icône que vous souhaitez utiliser, avec les paramètres de votre choix. Cette fois-ci, au lieu d'utiliser le code HTML de l'icône, on va utiliser sa référence Unicode fournie par FontAwesome, comme ici f14a.
Par exemple, si je souhaite appliquer l'icône à une liste à puces, je vais écrire :
li::before {
font: var(--fa-font-solid);
content: "\f14a";
}Vous pouvez bien sûr ajouter d'autres personnalisations de votre choix : des marges, de la couleur, etc.
Le système des pseudo-éléments est très pratique pour les éléments récurrents de votre design.
FontAwesome offre beaucoup de possibilités, et le site présente l'avantage de disposer d'une documentation très fournie pour essayer d'obtenir le résultat souhaité. J'espère que cet article vous aidera à vous lancer dans son utilisation !
