Font Awesome shortcode WordPress : guide complet pour ajouter des icônes
Sommaire de l'article
Introduction
Font Awesome est l’une des bibliothèques d’icônes les plus populaires pour améliorer l’apparence, la lisibilité et l’expérience utilisateur des sites web. Dans WordPress, tu peux afficher ces icônes de plusieurs façons : via du code HTML classique, via un plugin d’intégration ou à l’aide de shortcodes dédiés. L’objectif de cet article est d’expliquer, étape par étape, comment utiliser les shortcodes Font Awesome dans WordPress, quelles sont les solutions possibles (plugin officiel, plugins tiers, intégration manuelle) et quelles bonnes pratiques appliquer pour obtenir un site à la fois esthétique, rapide et optimisé pour le SEO.
Contrairement à une idée assez répandue, WordPress ne fournit pas nativement un « shortcode Font Awesome universel ». Les shortcodes sont ajoutés soit par le plugin officiel Font Awesome, soit par des plugins tiers (par exemple WP Font Awesome, Better Font Awesome, etc.), soit par ton thème qui peut intégrer ses propres codes courts. Il est donc important de bien comprendre quel plugin ou thème tu utilises afin d’identifier la bonne syntaxe de shortcode.
Concepts clés pour utiliser Font Awesome avec des shortcodes dans WordPress
Qu’est-ce que Font Awesome ?
Font Awesome est une collection d’icônes vectorielles (pictogrammes) fournies sous forme de police d’icônes ou de fichiers SVG. Ces icônes sont :
- Scalables : elles s’adaptent à toutes les tailles sans perte de qualité,
- Personnalisables via CSS : couleur, taille, rotation, animation, espacement, etc.,
- Légères : une seule police d’icônes permet d’afficher des centaines d’icônes,
- Polyvalentes : utilisées dans les menus, boutons d’appel à l’action, listes, blocs d’informations, encarts de contact, réseaux sociaux, etc.
La bibliothèque existe en version Free (gratuite) et Pro (payante), avec plusieurs styles d’icônes (Solid, Regular, Brands, Light, Duotone, Sharp, etc., selon la version et la licence).
Qu’est-ce qu’un shortcode dans WordPress ?
Un shortcode est un petit code entre crochets, par exemple [icon name="rocket"], que WordPress remplace automatiquement par un contenu plus complexe lors de l’affichage de la page. Les shortcodes sont très pratiques pour :
- insérer des icônes, des formulaires, des galeries ou des tableaux sans écrire de HTML complexe,
- permettre aux rédacteurs non techniques d’ajouter des éléments graphiques avancés,
- standardiser l’affichage d’éléments récurrents dans tout le site.
Les shortcodes ne sont pas propres à Font Awesome : ils sont fournis par les plugins et les thèmes. Pour Font Awesome, le shortcode le plus courant, fourni par le plugin officiel, est [icon], mais certains plugins tiers utilisent d’autres noms comme [wpfa] ou [fa].
Intégration de Font Awesome dans WordPress
Pour utiliser les icônes via shortcode dans WordPress, il faut d’abord charger Font Awesome dans ton site. Tu as trois approches principales :
- Utiliser le plugin officiel Font Awesome pour WordPress : il gère le chargement de la bibliothèque et fournit notamment le shortcode
[icon]ainsi qu’un sélecteur d’icônes (Icon Chooser) dans l’éditeur. - Installer un plugin tiers dédié aux icônes ou aux shortcodes Font Awesome (par exemple WP Font Awesome, Better Font Awesome ou d’autres plugins de shortcodes). Ces extensions ajoutent leurs propres codes courts, avec une syntaxe qui peut varier de plugin en plugin.
- Inclure manuellement Font Awesome via un lien CDN ou un fichier local dans ton thème (généralement dans
header.phpou viafunctions.php), puis utiliser le HTML classiquepour afficher les icônes. Dans ce cas, tu n’as pas de shortcode automatique, sauf si ton thème en prévoit un.
Comprendre les différents shortcodes Font Awesome disponibles
Le shortcode [icon] du plugin officiel Font Awesome
Lorsque tu utilises le plugin officiel Font Awesome pour WordPress, celui-ci te permet d’ajouter des icônes via :
- le sélecteur d’icônes intégré dans l’éditeur (Icon Chooser),
- des shortcodes sous la forme
[icon], - le HTML standard Font Awesome, par exemple
.
La structure de base du shortcode est la suivante :
[icon name="stroopwafel"]Tu peux remplacer stroopwafel par le nom de l’icône souhaitée, comme rocket, sun, phone, etc. Le plugin sait faire le lien entre le nom et l’icône correspondante dans la bibliothèque.
Gestion des styles d’icônes avec les préfixes
Avec le plugin officiel, tu peux préciser le style de l’icône à l’aide d’un attribut prefix, par exemple :
[icon name="stroopwafel" prefix="fa-sharp fa-light"]Quelques points importants :
- Le préfixe correspond au style, telles que les classes
fa-solid,fa-regular,fa-brands, ou encore des variations plus récentes commefa-sharpoufa-light. - Si tu n’indiques pas de préfixe, le plugin applique par défaut le style Classic Solid, ce qui convient à la majorité des cas d’usage.
Attributs avancés et accessibilité du shortcode [icon]
Le shortcode [icon] du plugin officiel accepte plusieurs attributs supplémentaires utiles pour l’accessibilité et le style, tels que :
class: pour ajouter des classes CSS personnalisées,style: pour définir des propriétés CSS en ligne (taille, couleur, etc.),title: pour afficher une infobulle au survol de l’icône,role,aria-hidden,aria-label,aria-labelledby: pour améliorer l’accessibilité et indiquer clairement le rôle de l’icône aux technologies d’assistance.
Par exemple, un shortcode complet peut ressembler à ceci :
[icon name="phone" prefix="fa-solid" class="icone-tel" aria-label="Téléphone" title="Nous appeler"]Shortcodes de plugins tiers (WP Font Awesome, Better Font Awesome, etc.)
En plus du plugin officiel, il existe plusieurs plugins tiers qui ajoutent leurs propres shortcodes. Chaque extension a sa syntaxe. Voici quelques exemples courants :
- Un plugin comme WP Font Awesome propose des shortcodes de ce type :
[wpfa icon="home"]pour Font Awesome 4.7+,[wpfa5s icon="home"]pour la version 5 ou 6 en style Solid,[wpfa5r icon="user"]pour le style Regular (sur certaines icônes),[wpfa5b icon="wordpress"]pour le style Brands.
- Certains plugins plus anciens peuvent utiliser des formats comme
[fa type="exclamation"]ou[fa class="fas fa-phone"].
Attention : ces plugins tiers ne chargent pas toujours eux-mêmes la librairie Font Awesome, ou peuvent être conçus pour des versions plus anciennes (par exemple Font Awesome 4.x). Avant de les utiliser en production, vérifie bien :
- la compatibilité avec la version actuelle de WordPress,
- la version de Font Awesome prise en charge (4, 5 ou 6),
- si le plugin inclut Font Awesome ou s’il repose sur le thème ou un autre plugin pour charger la bibliothèque.
Shortcodes propres à certains thèmes WordPress
Certains thèmes premium ou frameworks WordPress ajoutent leurs propres shortcodes d’icônes, basés sur Font Awesome ou d’autres bibliothèques. Par exemple, tu peux rencontrer des codes comme :
[qt_fa icon="fas fa-cog"][fa class="fas fa-fw fa-phone"]
Dans ces cas, la documentation du thème est la référence à consulter. Même si les icônes viennent de Font Awesome, la logique de shortcode est définie par le thème, pas par le plugin officiel.
Comment installer et configurer Font Awesome dans WordPress
Installer le plugin officiel Font Awesome
La méthode la plus simple pour profiter du shortcode [icon] et de l’Icon Chooser consiste à installer le plugin officiel Font Awesome depuis le répertoire des extensions WordPress. Après activation :
- Font Awesome est chargé sur ton site selon une configuration par défaut (version, mode de livraison, types d’icônes),
- tu peux utiliser le bloc Shortcode pour insérer des icônes via
[icon name="..."], - tu as accès à un sélecteur d’icônes dans l’éditeur qui insère directement le shortcode pour toi.
Version et mode de chargement par défaut
Par défaut, le plugin officiel est généralement configuré pour :
- utiliser une version stable de Font Awesome 5 lors de l’installation initiale,
- charger principalement les icônes gratuites (Free),
- déployer la bibliothèque via le CDN Font Awesome en mode Web Font ou, selon les réglages, via un Kit connecté à ton compte.
Tu peux ensuite adapter ces paramètres dans l’interface du plugin pour choisir par exemple la version, le type d’icônes (Free ou Pro) et la méthode de livraison (CDN, Kit, fichiers locaux, etc.).
Utiliser des icônes Pro et les Kits Font Awesome
Pour afficher des icônes Pro avec le plugin officiel, tu dois :
- créer un Kit depuis ton compte Font Awesome,
- activer les icônes Pro dans les paramètres de ce Kit,
- récupérer ton API Token et l’indiquer dans les réglages du plugin WordPress,
- associer ensuite tes pages WordPress à ce Kit pour qu’il charge les icônes Pro.
Une fois cela configuré, tu pourras rechercher et insérer des icônes Pro directement depuis l’Icon Chooser et via les shortcodes [icon], de la même façon que pour les icônes gratuites.
Intégrer Font Awesome sans plugin (CDN ou fichiers locaux)
Si tu ne veux pas utiliser de plugin, tu peux intégrer Font Awesome manuellement. Les étapes typiques sont :
- Ajouter un lien CDN ou un fichier CSS local dans l’en-tête de ton site, soit en modifiant le fichier
header.phpde ton thème, soit via une fonctionwp_enqueue_styledansfunctions.php. - Par exemple, avec un CDN, tu insères une balise
entre les baliseset - Ensuite, tu peux utiliser les balises HTML comme :
ou, pour les versions plus récentes, par exemple :
Dans cette configuration manuelle, tu n’as pas automatiquement accès au shortcode [icon]. Si tu veux utiliser des shortcodes malgré tout, tu devras soit installer un plugin de shortcodes, soit créer toi-même tes propres shortcodes dans le fichier functions.php.
Comment utiliser les shortcodes Font Awesome dans WordPress
Ajouter une icône avec le shortcode dans l’éditeur de blocs
Avec l’éditeur de blocs (Gutenberg), l’ajout d’un shortcode est très simple :
- Ouvre l’article ou la page où tu veux afficher l’icône.
- Clique sur le bouton « + » pour ajouter un bloc.
- Recherche le bloc « Shortcode » puis insère-le.
- Dans le champ du bloc, saisis par exemple :
[icon name="rocket"] - Enregistre ou mets à jour la page, puis prévisualise pour voir l’icône.
Tu peux bien sûr remplacer rocket par le nom de n’importe quelle autre icône de la librairie Font Awesome.
Insérer une icône dans un article ou une page en HTML
Si tu préfères ne pas utiliser de shortcodes, ou si ton installation de WordPress ne dispose pas du shortcode [icon], tu peux te contenter du HTML standard. Par exemple :
Cette méthode est directe, fonctionne avec ou sans plugin officiel (tant que Font Awesome est correctement chargé), et est pratique si tu connais bien les classes d’icônes. Elle ne remplace toutefois pas la simplicité des shortcodes pour les utilisateurs moins techniques.
Utiliser les shortcodes dans les widgets et les titres
Certains plugins de shortcodes Font Awesome permettent également d’utiliser les codes courts dans :
- les widgets de texte ou de type « Bloc de texte »,
- les titres de widgets,
- parfois même dans les titres d’articles ou de pages.
Dans ce cas, tu écris simplement le shortcode dans le champ texte supporté, par exemple :
[wpfa5s icon="home" size="2x"]ou, avec le plugin officiel :
[icon name="home"]Vérifie la documentation du plugin que tu utilises pour savoir si les shortcodes sont pris en charge dans les widgets et quels paramètres sont disponibles (taille, couleur, alignement, etc.).
Bonnes pratiques pour les shortcodes Font Awesome dans WordPress
Optimiser le choix des icônes pour le SEO et l’UX
Les icônes doivent renforcer le contenu, pas le remplacer. Quelques conseils :
- Utilise une icône de téléphone pour un numéro de contact, une icône d’e-mail pour un lien de contact, une icône de panier pour les boutons d’achat, etc.
- Évite de placer des informations essentielles uniquement dans une icône : les moteurs de recherche et certains utilisateurs (notamment malvoyants) doivent pouvoir comprendre le message sans dépendre d’un pictogramme.
- Ajoute, si nécessaire, un texte explicite à côté de l’icône (par exemple « Nous appeler » à côté de l’icône de téléphone).
Soigner la structure HTML et la sémantique
Pour garder une bonne structure de page :
- insère les icônes dans des éléments cohérents (par exemple dans des listes, des boutons, des titres de section, etc.),
- évite d’empiler inutilement les balises et les shortcodes,
- fais en sorte que l’icône complète la hiérarchie de contenu, sans perturber la lecture ni la navigation.
Par exemple, dans un bouton d’appel à l’action, tu peux combiner une icône et un texte clair :
[icon name="phone" prefix="fa-solid" aria-hidden="true"] Appeler maintenant
Accessibilité et attributs ARIA
Pour que les icônes soient accessibles :
- Si l’icône est purement décorative, utilise
aria-hidden="true"pour qu’elle soit ignorée par les lecteurs d’écran. - Si elle a une signification (par exemple une icône de téléphone cliquable), ajoute un
aria-labelou un texte visible à côté. - Utilise les attributs
role,aria-labelouaria-labelledbyvia le shortcode[icon]quand le plugin le permet.
Performance et poids de la page
Font Awesome est pratique, mais il peut ajouter du poids à ta page, surtout si tu charges toute la bibliothèque pour quelques icônes seulement. Pour optimiser les performances :
- limite le nombre d’icônes différentes sur une même page,
- préfère un Kit configuré ou une version optimisée de la bibliothèque pour ne charger que ce dont tu as besoin, lorsque c’est possible,
- évite de cumuler plusieurs plugins qui chargent chacun leur propre version de Font Awesome (risque de doublons et de conflits).
Outils et ressources utiles pour Font Awesome et WordPress
Outils recommandés pour travailler avec les icônes et les shortcodes
- Google Search Console : pour analyser l’indexation de ton site, détecter les problèmes techniques et vérifier que tes pages enrichies d’icônes se positionnent correctement.
- Google Analytics ou une solution d’analytics équivalente : pour étudier le comportement des visiteurs, les pages les plus consultées et mesurer l’impact de l’amélioration visuelle grâce aux icônes sur les conversions.
- Plugin officiel Font Awesome pour WordPress : pour intégrer facilement Font Awesome, gérer les Kits, activer l’Icon Chooser et insérer des icônes via le shortcode
[icon]. - Plugins tiers de shortcodes Font Awesome (par exemple WP Font Awesome, Better Font Awesome) : utiles si tu préfères une syntaxe particulière de shortcode ou si ton thème a été construit autour d’un de ces plugins.
Ressources pour trouver et maîtriser les shortcodes Font Awesome
- Bibliothèque d’icônes Font Awesome : pour rechercher une icône par mot-clé, consulter son nom exact, son style (Solid, Regular, Brands, etc.) et copier la référence à utiliser dans tes shortcodes ou ton HTML.
- Tutoriels sur l’utilisation des shortcodes WordPress : pour approfondir la manière dont fonctionnent les shortcodes en général (création, personnalisation, utilisation dans les pages, articles, widgets et constructeurs de pages).
- Documentation officielle du plugin Font Awesome pour WordPress : pour connaître la liste complète des attributs disponibles pour le shortcode
[icon], les exemples d’utilisation avancée et la configuration des Kits Pro. - Documentation des thèmes et plugins tiers : indispensable pour comprendre précisément la syntaxe des shortcodes spécifiques comme
[wpfa],[fa], ou ceux fournis par ton thème.
Foire Aux Questions (FAQ)
Pourquoi utiliser Font Awesome avec des shortcodes dans WordPress ?
L’utilisation de Font Awesome via des shortcodes permet d’insérer des icônes sans avoir à écrire ou mémoriser des balises HTML complètes. Tu peux simplement utiliser un code comme [icon name="rocket"] ou [wpfa5s icon="home"] selon le plugin, et laisser WordPress générer le code HTML nécessaire. C’est plus rapide, plus lisible pour les rédacteurs et facile à maintenir, surtout sur des sites contenant de nombreuses pages ou des contributeurs non techniques.
Comment installer Font Awesome dans WordPress ?
Voici les principales méthodes pour installer Font Awesome dans WordPress :
- Via le plugin officiel Font Awesome : installe-le depuis le répertoire des extensions, active-le, configure éventuellement ton Kit et commence à utiliser le shortcode
[icon]ou l’Icon Chooser dans l’éditeur. - Via un plugin tiers (par exemple WP Font Awesome, Better Font Awesome) : installe l’extension, vérifie si elle gère elle-même le chargement de la bibliothèque, et utilise la syntaxe de shortcode qu’elle propose (par exemple
[wpfa icon="home"]). - Via une intégration manuelle : ajoute un lien CDN ou un fichier CSS local dans ton en-tête (par exemple via
header.phpoufunctions.php), puis utilise les balises HTMLpour afficher les icônes.
Puis-je personnaliser les icônes Font Awesome via shortcode ?
Oui, tu peux personnaliser les icônes de plusieurs façons :
- Taille : en appliquant des classes spécifiques (par exemple
fa-lg,fa-2x,fa-3x, etc.) via les attributs de shortcode ou un style CSS personnalisé. - Couleur : en utilisant des classes CSS ou des styles en ligne via l’attribut
styledu shortcode (par exemplestyle="color:#ff0000;"). - Alignement et espacement : en ajoutant des classes personnalisées à l’icône et en les stylisant dans ta feuille de style.
- Animations et rotation : en associant les classes prévues par Font Awesome (par exemple pour les rotations ou les effets d’animation) par le biais des attributs du shortcode ou du HTML.
Le shortcode Font Awesome est-il le même sur tous les sites WordPress ?
Non, le shortcode dépend du plugin ou du thème qui le fournit. Le plugin officiel ajoute un shortcode [icon], mais un autre plugin peut utiliser [wpfa], [fa] ou encore un autre nom. Si tu changes de plugin ou de thème, la syntaxe des shortcodes peut donc changer. Avant de mettre en place des icônes sur un grand nombre de pages, il est judicieux de :
- déterminer clairement quel plugin ou thème fournit le shortcode,
- consulter sa documentation pour connaître la syntaxe et les attributs disponibles,
- anticiper la maintenance à long terme (en cas de changement de plugin ou de thème, tu devras peut-être adapter les shortcodes existants).
Que faire si mes icônes ne s’affichent pas ?
Si les icônes ne s’affichent pas malgré le shortcode ou le HTML, vérifie les points suivants :
- Assure-toi que Font Awesome est bien chargé (via plugin ou CDN). Si la feuille de style n’est pas chargée, les classes d’icônes ne produiront rien.
- Contrôle la version de Font Awesome utilisée et les classes correspondantes. Par exemple, les classes
fa,fas,far,faboufa-solidpeuvent varier selon les versions. - Vérifie la syntaxe du shortcode ou du HTML : pas d’erreur de frappe, de guillemets ou de nom d’icône incorrect.
- Assure-toi que tu n’as pas plusieurs plugins qui entrent en conflit en chargeant des versions différentes de Font Awesome.
Conclusion
Utiliser Font Awesome avec des shortcodes dans WordPress est une méthode efficace pour enrichir visuellement tes pages tout en gardant un fonctionnement simple et accessible aux rédacteurs. Le plugin officiel propose un shortcode [icon] flexible, compatible avec l’Icon Chooser et avec des attributs avancés pour l’accessibilité et la personnalisation. Les plugins tiers et certains thèmes offrent d’autres syntaxes de shortcodes, qui peuvent convenir dans des contextes spécifiques.
Pour tirer le meilleur parti de Font Awesome, prends le temps de :
- choisir la méthode d’intégration la mieux adaptée (plugin officiel, plugin tiers, intégration manuelle),
- maîtriser la syntaxe des shortcodes fournis par ton outil,
- appliquer les bonnes pratiques d’UX, d’accessibilité et de performance,
- sélectionner des icônes pertinentes qui renforcent ton contenu et ton message.
En combinant ces éléments, tu pourras créer un site WordPress à la fois esthétique, clair et performant, où les icônes servent réellement l’expérience utilisateur et la compréhension de ton contenu.
Besoin d'aide avec votre SEO ?
Notre équipe d'experts peut vous aider à optimiser votre site e-commerce