Comment ajouter Font Awesome à WordPress : 3 méthodes simples 

Vous téléchargez une icône sociale au format PNG, elle est belle sur votre ordinateur portable, puis vous ouvrez le site sur votre téléphone et les bords sont devenus flous. Changez la couleur de votre marque six mois plus tard et vous retournez dans un éditeur d'images pour réexporter tout l'ensemble.

Font Awesome résout ces deux problèmes, car ses icônes sont des formes vectorielles que vous retravaillez avec un sélecteur de couleurs au lieu d'une application graphique.

Il y a trois façons de l'intégrer à WordPress, et je les ai longtemps mises dans le mauvais ordre sur cette page. Le plugin gratuit officiel est la voie la plus simple pour la plupart des gens, alors c'est par là que je vais commencer.

Méthodes pour ajouter Font Awesome à WordPress :

• Qu’est-ce que Font Awesome et pourquoi l’utiliser ?
• 1. Ajouter Font Awesome avec le plugin officiel
• 2. Ajouter Font Awesome n'importe où dans votre design avec SeedProd
• 3. Ajouter Font Awesome manuellement avec du code
• Quelle méthode devriez-vous utiliser ?
• FAQ sur l'ajout de Font Awesome à WordPress

Qu’est-ce que Font Awesome et pourquoi l’utiliser ?

Font Awesome est une bibliothèque d'icônes, donc au lieu de télécharger une image pour chaque flèche, symbole de téléphone et logo de réseau social, vous en choisissez une dans une liste et la déposez sur votre page.

Les icônes sont des vecteurs plutôt que des images, elles restent donc nettes quelle que soit la taille et vous les retravaillez comme vous retravailleriez du texte.

Elles sont également beaucoup plus légères que les PNG qu'elles remplacent, ce qui est utile si vous travaillez sur l'accélération de votre site WordPress.

Le nombre d'icônes que vous obtenez dépend de la méthode que vous choisissez, et les chiffres sont souvent cités de manière approximative. Voici donc un chiffre que je peux réellement vérifier. J'ai ouvert SeedProd 6.20.9 sur mon propre site de test et j'ai compté la bibliothèque d'icônes qu'il fournit : 2 420 icônes, de Font Awesome Free 6.6.0.

Elles s'affichent également de manière cohérente sur les navigateurs et appareils modernes, et vous pouvez changer la couleur, la taille et l'alignement sans toucher à un fichier image. Ce dernier point est le véritable avantage, car c'est la différence entre une modification de couleur qui prend dix secondes et une qui prend un après-midi.

Ensuite, intégrons-le à votre site.

1. Ajouter Font Awesome avec le plugin officiel (le plus simple)

Si vous voulez juste des icônes dans vos articles et pages, commencez ici. Le plugin Font Awesome officiel est gratuit, il est développé par l'équipe Font Awesome, et il vous évite de gérer vous-même les feuilles de style.

Je vérifierais qu'il est toujours maintenu avant d'installer un plugin d'icônes, car beaucoup sont abandonnés. Lorsque j'ai consulté sa fiche sur WordPress.org, il était à la version 5.2.1, mis à jour en août 2026 et testé avec WordPress 7.1, ce qui est aussi récent que possible pour les fiches de plugins.

Installez-le depuis Plugins › Ajouter comme n'importe quel autre plugin, puis activez-le. Si vous ne l'avez jamais fait auparavant, il existe un guide pour débutants sur l'installation d'un plugin WordPress qui vous explique la procédure.

Ajouter une icône avec le bloc Font Awesome

Une fois le plugin actif, ouvrez un article ou une page et ajoutez le bloc Icône Font Awesome.

Cliquez sur Choisir une icône et le sélecteur d'icônes s'ouvre.

À partir de là, vous pouvez rechercher par nom d'icône, par catégorie ou par mot-clé, et changer la Famille et le Style avec les menus déroulants si vous souhaitez une version plus légère ou plus épaisse de la même forme. Cliquez sur l'icône que vous voulez et elle s'insère dans votre contenu.

Si vous préférez placer une icône au milieu d’une phrase plutôt que sur sa propre ligne, sélectionnez le texte et choisissez Font Awesome dans la barre d’outils de mise en forme à la place. Cela ouvre le même sélecteur d’icônes, et nécessite WordPress 6.3 ou une version plus récente.

Ajouter des icônes Font Awesome avec un shortcode

Cette page enseignait auparavant le shortcode comme méthode principale, collé dans un bloc Shortcode. C’était le mauvais conseil pour quiconque utilise l’éditeur de blocs, et le bloc ci-dessus est ce que vous voulez à la place.

Les shortcodes fonctionnent toujours, et c’est ce vers quoi la documentation du plugin vous oriente si vous êtes dans l’éditeur classique. Ajoutez le nom de l’icône que vous souhaitez :

[icon name="rocket"]

Remplacez « rocket » par ce dont vous avez besoin, et omettez le préfixe fa- du nom. Sans style spécifié, vous obtiendrez la version Solid classique de l’icône.

Pour demander une graisse particulière, ajoutez un préfixe :

[icon name="rocket" prefix="fa-sharp fa-light"]

Pour trouver le nom d’une icône, parcourez la galerie sur fontawesome.com/icons et cliquez sur celle que vous souhaitez.

Copiez le nom, collez-le dans votre shortcode et publiez.

Cette méthode a une seule limite réelle. Elle place des icônes dans votre contenu, ce qui est bien jusqu’à ce que vous en vouliez une dans l’en-tête de votre site, dans un menu, ou sur une page de destination que vous avez conçue vous-même. Pour cela, vous avez besoin de quelque chose qui modifie la conception plutôt que l’article.

2. Ajouter Font Awesome n'importe où dans votre design avec SeedProd

SeedProd est un constructeur de sites web par glisser-déposer pour WordPress, vous concevez donc des pages et des modèles visuellement au lieu de modifier les fichiers de thème. Je l’utilise sur mon propre site, et les icônes sont l’une des choses qu’il rend vraiment rapides.

La raison de l’utiliser ici est le placement. Parce que vous modifiez la conception, vous pouvez placer une icône Font Awesome dans un en-tête, un pied de page, une barre latérale ou une page de destination, et rien de tout cela ne nécessite de classes HTML ou CSS.

Voici comment je les ajoute.

Étape 1. Installer et activer SeedProd

Installez et activez SeedProd sur votre site. Il existe une version gratuite, et les blocs Icône et Boîte à icônes que j’utilise ci-dessous sont disponibles dans tous les plans payants, donc Basic vous suffit si c’est par là que vous commencez.

Après l’activation, vous serez dirigé vers l’écran de licence. Collez votre clé de licence et cliquez sur Vérifier la clé. Vous pouvez y revenir à tout moment depuis SeedProd › Paramètres › Clé de licence.

Votre clé se trouve dans votre compte sur le site web SeedProd, dans la section Téléchargements.

Étape 2. Nommez votre page et choisissez un modèle

Allez dans SeedProd › Pages de destination et cliquez sur Ajouter une nouvelle page de destination.

Nommez d’abord votre page. SeedProd crée une URL à partir du nom pendant que vous tapez, et vous pouvez la modifier plus tard dans les paramètres de la page.

Ensuite, cliquez sur Suivant : Choisir un modèle et sélectionnez un design pour commencer.

N’importe quel modèle peut être personnalisé de fond en comble, alors choisissez celui qui est le plus proche de ce que vous recherchez plutôt que de vous y attarder. Il existe une option vierge si vous préférez commencer à partir de rien.

SeedProd ouvre ensuite la page dans l’éditeur visuel.

Étape 3. Ajouter des icônes Font Awesome

L'éditeur affiche un aperçu en direct de votre page à droite, avec les blocs et les paramètres à gauche.

Cliquez sur n'importe quel bloc déjà présent sur la page et ses paramètres s'ouvrent dans le panneau latéral gauche, où vous pouvez modifier le contenu, les couleurs, les arrière-plans et les polices.

Pour ajouter une icône, trouvez le bloc Icône sous Design et faites-le glisser sur votre mise en page.

Il s'insère avec une flèche par défaut. Avec le bloc sélectionné, cliquez sur le bouton Bibliothèque d'icônes dans le panneau des paramètres pour le remplacer.

Cela ouvre le sélecteur avec les 2 420 icônes qu'il contient. Faites défiler, ou tapez ce que vous recherchez dans la boîte de recherche, ce qui est plus rapide une fois que vous connaissez à peu près le nom de l'icône.

Cliquez dessus et elle apparaît sur votre mise en page. Vous pouvez ensuite définir sa couleur, sa taille, son alignement et son lien.

Si vous souhaitez que l'icône porte un titre et une ligne de texte avec elle, utilisez plutôt le bloc Boîte d'icônes. Il se comporte de la même manière, avec de la place pour la copie supplémentaire. Je l'utilise pour les sections de fonctionnalités, où une icône seule ne dit pas assez.

Deux autres blocs utilisent le même ensemble d'icônes, et ils valent la peine d'être connus car ils vous évitent de placer des icônes à la main.

Le bloc Profils Sociaux gère les icônes personnalisées des réseaux sociaux en ensemble, vous n'avez donc pas à en faire glisser une par réseau.

Et si vous gérez une boutique, le bloc Panier Menu place une icône de panier d'achat dans votre menu.

Étape 4. Publiez vos modifications

Cliquez sur Enregistrer, puis sur Publier pour mettre la page en ligne.

Visitez la page et vérifiez les icônes sur quelques tailles d'écran avant de passer à autre chose.

3. Ajouter Font Awesome manuellement avec du code

Vous pouvez également charger Font Awesome vous-même et éviter complètement le plugin. Je ne le ferais que si vous êtes à l'aise avec la modification des fichiers de thème, car une faute de frappe ici fait planter tout le site plutôt que de simplement casser une icône.

L'extrait ci-dessous charge la feuille de style à partir d'un CDN. Il appartient au fichier functions.php d'un thème enfant, jamais au thème parent, sinon la prochaine mise à jour du thème l'effacera.

function my_theme_font_awesome() {
    wp_enqueue_style(
        'font-awesome',
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css',
        array(),
        '6.6.0'
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_font_awesome' );

Une fois cela en place, vous écrivez les icônes en HTML partout où vous pouvez ajouter du HTML :

<i class="fa-solid fa-rocket"></i>

Honnêtement, je ne modifie plus le fichier functions.php pour cela. Je garde des extraits comme celui-ci dans WPCode, car le code survit alors à un changement de thème et je peux l'activer ou le désactiver sans ouvrir d'éditeur de fichiers.

Quelle méthode devriez-vous utiliser ?

La question qui sépare réellement ces trois-là est l'endroit où vous voulez que l'icône apparaisse, pas la facilité de configuration de chacune.

Méthode	Où les icônes peuvent aller	Besoin de code ?	Coût
Plugin officiel Font Awesome	Dans les articles et les pages, y compris au milieu d'une phrase	Non	Gratuit
SeedProd	N'importe où dans le design : en-têtes, pieds de page, menus, pages de destination	Non	Icône et Boîte d'icônes sur tout plan payant
Code manuel	Partout où vous pouvez écrire du HTML	Oui	Gratuit

Pour la plupart des gens qui écrivent des articles, le plugin officiel est la bonne solution et je m'arrêterais là. Il est gratuit, il est maintenu par les personnes qui créent les icônes, et l'outil de sélection d'icônes est plus rapide que de chercher un nom de classe.

Là où ça ne suffit pas, c'est pour tout ce qui est en dehors de votre contenu. Si l'icône doit se trouver dans un en-tête, un pied de page, un menu ou une page que vous avez conçue vous-même, SeedProd est ce que j'utilise, car j'édite le design à ce moment-là plutôt que l'article.

La méthode manuelle vaut la peine dans un cas : vous voulez une version spécifique de Font Awesome épinglée et vous préférez ne pas y ajouter de plugin. Sinon, vous vous engagez dans un travail de maintenance sans gain réel.

FAQ sur l'ajout de Font Awesome à WordPress

Font Awesome est-il gratuit sur un site WordPress ?

Oui, l'ensemble gratuit couvre la plupart des sites, et c'est ce que le plugin officiel et SeedProd vous offrent par défaut. Font Awesome vend un abonnement Pro pour la bibliothèque d'icônes plus grande et des styles supplémentaires, mais vous n'en avez pas besoin pour placer des icônes sur une page.

Pourquoi mes icônes Font Awesome s'affichent-elles comme des carrés vides ?

Généralement, la feuille de style ne se charge pas, ou deux versions différentes de Font Awesome se chargent et se combattent, ce qui arrive lorsque votre thème en inclut une et qu'un plugin en inclut une autre. Le plugin officiel dispose d'un scanner de conflits intégré qui trouve les autres copies pour vous.

Font Awesome ralentit-il mon site ?

Il ajoute une requête de feuille de style, donc la réponse honnête est un peu, mais beaucoup moins que les fichiers image qu'il remplace. La version qui peut nuire est le chargement de toute la bibliothèque deux fois, ce qui est le même problème de conflit que ci-dessus.

Puis-je placer une icône Font Awesome dans mon menu WordPress ?

Pas via l'écran standard Apparence et Menus, qui n'accepte que du texte brut. Vous devriez soit construire le menu dans un outil qui prend en charge les icônes, comme les modèles d'en-tête de SeedProd, soit ajouter le balisage de l'icône à la main une fois que Font Awesome est chargé.

Comment changer la taille et la couleur d'une icône ?

Dans SeedProd, vous définissez les deux dans le panneau des paramètres du bloc avec un curseur et un sélecteur de couleur. En HTML, vous le stylisez comme du texte, ou vous utilisez les classes de taille de Font Awesome telles que fa-2x.

Ai-je besoin de SeedProd Pro pour les blocs d'icônes ?

Non. La documentation de SeedProd liste le bloc Icône et le bloc Boîte à icônes comme disponibles sur tous ses plans de licence, donc Basic les inclut. Cette page indiquait auparavant que vous aviez besoin de Pro pour la Boîte à icônes, ce qui était faux.

Prêt à ajouter des icônes à votre site WordPress ?

Choisissez en fonction de l'endroit où l'icône doit se trouver. Articles et pages, utilisez le plugin officiel et vous aurez terminé en environ deux minutes.

S'il s'agit de votre en-tête, de votre pied de page ou d'une page que vous avez conçue, c'est à cela que servent les blocs Icône et Boîte à icônes de SeedProd, et ils sont inclus dans tous les plans payants plutôt que verrouillés derrière le niveau supérieur.

Dans tous les cas, changer une couleur plus tard prend un clic au lieu d'une réexportation, ce qui est la raison pour laquelle j'ai arrêté d'utiliser des fichiers image pour cela.

Ensuite, vous voudrez peut-être modifier un menu dans WordPress pour organiser votre navigation, ou jeter un œil aux meilleurs thèmes WordPress si vous choisissez encore un design.

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.