Un site sans icônes ressemble à un mur de texte datant de 2005. Mais dessiner des icônes dans Photoshop et jongler avec des sprites n’a rien d’amusant, surtout si vous n’êtes pas designer.

Font Awesome résout ce problème depuis 2012: il s’agit d’une bibliothèque gratuite de plus de 2000 icônes vectorielles qui se comportent comme du texte normal. Changez la couleur en CSS et l’icône change de couleur. Augmentez la taille de la police et elle s’adapte sans pixellisation ni flou.

En pratique, la version gratuite suffit pour les menus, les boutons et les réseaux sociaux. Si vous avez besoin de duotones et de plus de 30 000 icônes, il existe une offre Pro à partir de 60 $ par an. Voici trois façons d’ajouter Font Awesome à WordPress: de la plus simple à l’installation manuelle pour ceux qui n’ont pas peur de functions.php.

💡 Aperçu rapide:

• Installez le plugin officiel Font Awesome depuis le répertoire WordPress; cela prend une minute et ne nécessite aucune modification de code
• Pour un contrôle manuel, connectez Font Awesome via CDN ou Kit dans le functions.php de votre thème enfant
• Si vous utilisez Elementor, les icônes sont déjà intégrées et aucun plugin séparé n’est nécessaire
• Une fois connecté, modifiez la taille, la couleur et l’animation des icônes via CSS ou des classes prêtes à l’emploi

Qu’est-ce que Font Awesome

Font Awesome est une police d’icônes: au lieu de lettres, elle contient des symboles d’icônes. Le navigateur les restitue sous forme de graphiques vectoriels, de sorte que les contours restent nets sur n’importe quel écran et à n’importe quelle échelle. Pas de PNG, de sprites ni de srcset.

La bibliothèque est divisée en deux parties. La version gratuite comprend cinq styles: Solid, Regular, Brands, Duotone et Sharp. La version Pro ajoute Thin, Light et des dizaines de milliers d’icônes, ainsi que la possibilité de télécharger vos propres SVG via Kit. Pour un site vitrine ou un blog classique, la version gratuite couvre la grande majorité des besoins: flèches, réseaux sociaux, recherche, panier, cases à cocher.

Le principal avantage par rapport aux icônes matricielles est le contrôle total via CSS. Couleur, taille, ombre, rotation, animation: tout se paramètre avec des classes, sans aucune retouche graphique.

Méthode 1: le plugin officiel (recommandé)

La voie la plus sûre consiste à installer le plugin officiel Font Awesome sur WordPress.org. Il est publié par la même équipe qui crée la bibliothèque elle-même. Le plugin se met à jour en synchronisation avec les nouvelles versions d’icônes et ne dépend pas de votre thème.

Procédure d’installation:

Allez dans Extensions → Ajouter. Dans la barre de recherche, tapez «font awesome» et appuyez sur Entrée.

Cliquez sur Installer, puis sur Activer.

C’est fait. Après l’activation, une entrée Font Awesome apparaît dans le menu Réglages où vous pouvez changer la source des icônes (CDN ou Kit), activer la compatibilité avec la version quatre et lancer le scanner de conflits.

Le plugin ajoute un bloc «Icône Font Awesome» distinct dans l’éditeur de blocs. Cliquez dessus et une recherche s’ouvre dans toute la bibliothèque. Sélectionnez une icône, cliquez sur «Insérer», et elle apparaît dans le texte sous forme de SVG. Le style se règle directement dans la barre latérale du bloc: taille, couleur, rotation.

Pour l’éditeur classique, un shortcode fonctionne:

1
[icon name="download" prefix="fa-solid"]

Ou en HTML pur:

1
<i class="fa-solid fa-download"></i>

Si vous disposez d’un compte Pro, créez un Kit sur fontawesome.com, copiez le jeton API et collez-le dans les paramètres de l’extension. L’Icon Chooser affichera alors également les icônes Pro.

Méthode 2: installation manuelle via le fichier functions.php

Cette méthode s’adresse à ceux qui souhaitent contrôler chaque ressource chargée sur le site ou éviter les extensions supplémentaires. Elle passe par un thème enfant, afin que la mise à jour du thème parent n’efface pas vos modifications.

Créer un thème enfant

Dans le dossier wp-content/themes/, créez un répertoire avec le suffixe -child (par exemple, astra-child). À l’intérieur, créez deux fichiers.

style.css:

1
/*
2
Theme Name: Astra Child
3
Template: astra
4
*/

functions.php:

1
<?php
2
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
3
function enqueue_parent_styles() {
4
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
5
}

Allez dans Apparence → Thèmes et activez le thème enfant.

Connecter Font Awesome via CDN

Ajoutez ce code au fichier functions.php de votre thème enfant:

1
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
2
function enqueue_font_awesome() {
3
    wp_enqueue_style(
4
        'font-awesome',
5
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css',
6
        array(),
7
        '6.7.2'
8
    );
9
}

Ce hook récupère la version gratuite depuis le CDN cdnjs, le CDN public le plus fiable pour FA 6. Le numéro 6.7.2 correspond à la version en date de juin 2026; vérifiez la version actuelle sur la page du package cdnjs et remplacez-la par la plus récente.

Alternative: le Kit Font Awesome

Le Kit donne accès aux icônes Pro et charge automatiquement uniquement les styles utilisés sur la page, ce qui réduit le nombre de kilo-octets inutiles.

Inscrivez-vous sur le site Font Awesome, créez un Kit, copiez le code d’intégration et collez-le dans le fichier header.php de votre thème enfant avant </head>:

1
<script src="https://kit.fontawesome.com/YOUR_CODE.js" crossorigin="anonymous"></script>

L’inconvénient du Kit est que l’offre gratuite est limitée à 10 000 pages vues par mois. Pour un site à plus fort trafic, utilisez soit le CDN, soit la version Pro.

L’éditeur de thème intégré (Apparence → Éditeur de fichiers du thème) vous permet de modifier functions.php directement depuis l’administration. Il est toutefois plus sûr de passer par FTP ou le gestionnaire de fichiers de votre hébergement: une faute de frappe dans le code PHP casse le site et, sans accès aux fichiers, vous n’aurez aucun moyen de le rétablir.

Méthode 3: via Elementor ou un autre constructeur de pages

Si vous utilisez déjà Elementor, vous n’avez pas besoin d’un plugin Font Awesome séparé; le constructeur de pages intègre la bibliothèque en standard.

Dans tout widget comportant une icône (Icône, Boîte d’icône, Liste d’icônes), cliquez sur l’icône et une bibliothèque s’ouvre avec une recherche parmi tous les styles gratuits. La couleur, la taille, l’ombre et les effets de survol se configurent dans la barre latérale, sans écrire une seule ligne de CSS.

Il en va de même pour SeedProd, Beaver Builder et Divi. Vérifiez les paramètres de votre constructeur de pages: presque tous les constructeurs visuels populaires pour WordPress incluent déjà Font Awesome dans leur cœur.

Comment modifier les styles d’icônes

Après avoir connecté Font Awesome, vous contrôlez les icônes exclusivement via des classes et du CSS. L’édition directe des fichiers SVG n’est pas nécessaire.

Taille

La taille de l’icône se définit à l’aide de classes prêtes à l’emploi. Une classe rend l’icône un tiers plus grande, une autre la double, une troisième la triple, et ainsi de suite jusqu’à dix fois la taille d’origine. Consultez les valeurs exactes de toutes les classes sur le site de Font Awesome.

Exemple d’une icône dont la taille est triplée:

Exemple d’une icône dont la taille est triplée:

1
<i class="fa-solid fa-download fa-3x"></i>

Rotation et symétrie

• fa-rotate-90, rotation de 90°
• fa-rotate-180, rotation de 180°
• fa-rotate-270, rotation de 270°
• fa-flip-horizontal, symétrie horizontale
• fa-flip-vertical, symétrie verticale

Animation

Deux options, toutes deux via des classes:

• fa-spin, rotation fluide (adaptée aux indicateurs de chargement)
• fa-pulse, rotation en huit étapes (effet de pulsation)

1
<i class="fa-solid fa-spinner fa-spin"></i>

Couleur

La couleur de l’icône est héritée du texte parent. Pour définir la vôtre, utilisez une règle CSS:

1
.fa-download {
2
    color: #27ae60;
3
}

Le moyen le plus simple d’ajouter ce CSS est de passer par Apparence → Personnaliser → CSS additionnel. Les modifications s’appliquent immédiatement et sont visibles en temps réel.

Icône via un pseudo-élément

Lorsqu’une icône doit être attachée à un élément sans balisage supplémentaire, utilisez ::before ou ::after en CSS:

1
.external-link::after {
2
    content: "\f08e";
3
    font-family: "Font Awesome 6 Free";
4
    font-weight: 900;
5
    margin-left: 6px;
6
}

Le code \f08e est l’identifiant Unicode de l’icône. Vous le trouverez sur la page de l’icône concernée sur fontawesome.com, où il est indiqué sous le nom.

Où trouver des icônes

Rendez-vous sur fontawesome.com/icons, saisissez un mot-clé dans la recherche et choisissez un style. Sur la page de l’icône, vous trouverez le snippet HTML, l’Unicode et la liste des styles disponibles. Copiez et collez là où vous en avez besoin.

Une remarque à propos du tutoriel vidéo

Si vous préférez regarder plutôt que lire, voici un tutoriel sur l’ajout d’icônes Font Awesome dans un menu WordPress:

Après l’avoir visionné, revenez au texte: vous trouverez ci-dessous des nuances qui ne sont pas abordées dans la vidéo.

⁉️🤔 Foire aux questions

Dois-je payer pour Font Awesome?

La version gratuite couvre les besoins de la grande majorité des sites: plus de 2000 icônes en cinq styles, y compris les icônes de marque (Facebook, Twitter, Instagram et des centaines d’autres). La version Pro coûte à partir de 60 $ par an et ajoute les familles Thin, Light, Sharp, le Duotone dans tous les styles, ainsi que la possibilité d’importer vos propres SVG. Payer est pertinent si vous vendez des icônes intégrées à un produit ou si vous avez spécifiquement besoin des duotones. L’extension Font Awesome sur WordPress.org est entièrement gratuite; les icônes Pro se connectent via un jeton API dans les paramètres de cette même extension, sans rien acheter ni installer séparément.

Quelle méthode de connexion choisir?

Pour les débutants et les sites classiques, l’extension officielle. Elle s’installe en deux clics, propose une recherche d’icônes intégrée dans l’éditeur et un scanner de conflits. L’installation manuelle par CDN se justifie si vous cherchez à limiter le nombre d’extensions sur votre site et savez exactement dans quel fichier ajouter wp_enqueue_style. Le Kit Font Awesome est un compromis: facile à connecter sans extension, mais avec une limite gratuite de 10 000 affichages.

Que faire si les icônes ne s’affichent pas?

Commencez par lancer le scanner de détection de conflits dans les paramètres de l’extension Font Awesome. Le problème vient le plus souvent du thème ou d’une autre extension qui charge sa propre version de Font Awesome, ce qui crée un conflit de version. Le scanner identifiera la source du conflit et l’extension proposera de la bloquer. Le deuxième cas fréquent est une erreur de syntaxe: vérifiez que vous utilisez bien le préfixe fa-solid et non fa (qui correspond à la syntaxe de l’ancienne version 4).

Puis-je utiliser Font Awesome sans WordPress?

Oui, Font Awesome n’est pas lié à WordPress. Connectez le lien CDN dans le <head> de n’importe quel document HTML et insérez les icônes avec la balise <i class="fa-solid fa-name"></i>. Cela fonctionne avec React, Vue, Laravel, du HTML pur et même des générateurs de PDF. Sur fontawesome.com/docs, vous trouverez des instructions pour une dizaine de plateformes.

Pourquoi Font Awesome est-il meilleur que les autres bibliothèques d’icônes?

Deux arguments principaux: la taille de la communauté et la compatibilité. Font Awesome est utilisé par des millions de sites, ce qui fait que la documentation est traduite dans une dizaine de langues et que les réponses à la plupart des problèmes se trouvent en quelques secondes via une recherche. Ensuite, l’extension WordPress officielle avec résolution automatique des conflits: ni Material Icons ni Bootstrap Icons ne proposent cela.

Cela en vaut-il la peine: que choisir selon votre besoin

Si vous avez lu jusqu’ici, le tableau ci-dessous vous fera gagner du temps:

Vérifiez qu’après la connexion, les icônes s’affichent correctement dans les différents navigateurs et sur les appareils mobiles. Si vous constatez un scintillement ou une substitution d’icône, lancez le scanner de conflits depuis la section «Dépannage» dans les paramètres de l’extension. Le problème se règle presque toujours en un clic.