La plupart des sites WordPress ont l’air non professionnels lorsqu’ils s’appuient sur des fichiers image flous pour les icônes des médias sociaux. La meilleure solution est d’ajouter Font Awesome à WordPress, ce qui vous donne des icônes nettes et évolutives qui se mettent à jour en quelques secondes.
Dans ce guide, je vais vous montrer étape par étape comment le configurer afin que vous puissiez obtenir des icônes nettes et professionnelles sur votre site sans la frustration habituelle.
Étapes rapides pour ajouter des icônes Font Awesome personnalisables à WordPress :
Qu’est-ce que Font Awesome et pourquoi l’utiliser ?
Font Awesome est une immense bibliothèque d’icônes avec des milliers de conceptions prêtes à l’emploi, des logos de médias sociaux aux flèches et icônes de navigation. Au lieu de télécharger des fichiers image encombrants, vous pouvez insérer une icône nette et évolutive qui a toujours fière allure.
La bibliothèque contient plus de 7 000 icônes, et comme elles sont basées sur des vecteurs, elles se redimensionnent sans perte de qualité. Cela les rend rapides à charger, légères et parfaites pour maintenir la vitesse de votre site WordPress.
Elles fonctionnent également sur tous les navigateurs et appareils modernes, de sorte que votre site est cohérent partout. De plus, vous pouvez facilement ajuster la couleur, la taille et le style pour correspondre à la conception de votre marque.
Ensuite, voyons comment ajouter Font Awesome à votre thème WordPress.
Méthode personnalisable : Ajouter Font Awesome avec SeedProd
Nous utiliserons SeedProd pour la première méthode car elle vous donne plus de liberté quant à l’endroit où vous pouvez utiliser des icônes de polices sur votre site Web.
SeedProd est le meilleur constructeur de pages WordPress par glisser-déposer du marché. Non seulement il intègre plus de 1400 icônes Font Awesome, mais il est également livré avec une boîte d’icônes que vous pouvez ajouter à n’importe quelle page sans écrire de code HTML ou de classes CSS.
Avec SeedProd, vous pouvez créer des thèmes WordPress personnalisés, des pages de destination, des en-têtes, des pieds de page ou des barres latérales et utiliser des icônes Font Awesome n’importe où sur ces mises en page par glisser-déposer.
Suivez les étapes simples ci-dessous pour ajouter des polices d’icônes à WordPress avec SeedProd.
Étape 1. Installer et activer SeedProd
La première chose que vous devrez faire est d’installer et d’activer SeedProd sur votre site Web WordPress. Bien qu’il existe une version gratuite de SeedProd, nous utiliserons la version pro pour ce guide car elle inclut la fonctionnalité de boîte d’icônes.
Pour plus de détails, vous pouvez consulter ce guide pour débutants sur comment installer un plugin WordPress.
Après avoir installé le plugin, rendez-vous sur SeedProd » Paramètres et entrez votre clé de licence de plugin.
Vous pouvez trouver votre clé de licence dans votre compte sur le site Web SeedProd dans la section Téléchargements.
Après avoir collé votre clé de licence, cliquez sur le bouton Vérifier la clé.
Ensuite, visitez SeedProd » Pages depuis votre administrateur WordPress et cliquez sur le bouton Ajouter une nouvelle page de destination.
Étape 2. Choisir un modèle prédéfini
Sur l’écran suivant, vous pouvez choisir un modèle à utiliser comme point de départ pour votre page. Avec plus de 180 modèles conçus par des professionnels, vous pouvez personnaliser n’importe quel design pour répondre aux besoins de votre site Web.
Astuce pro : Vous pouvez également utiliser la fonctionnalité de création de thèmes de SeedProd pour créer un thème WordPress personnalisé à partir de zéro en utilisant la même fonctionnalité de constructeur de pages.
Pour choisir un modèle, survolez la miniature avec votre souris et cliquez sur l'icône « Coche ».
Pour ce tutoriel, nous utiliserons le modèle de page de vente d'eBook, cependant, vous pouvez utiliser n'importe quel design que vous aimez.
Après avoir choisi votre modèle, vous pouvez donner un nom à votre page. Le plugin générera automatiquement une URL basée sur le titre que vous entrez, mais vous pouvez la modifier à tout moment dans la page des paramètres.
Lorsque vous êtes satisfait du nom et de l'URL de votre page, cliquez sur le bouton Enregistrer et commencer à modifier la page.
Après avoir cliqué sur le bouton, vous accéderez au constructeur de pages SeedProd, où vous pourrez personnaliser votre design.
Étape 3. Ajouter des icônes Font Awesome
L'éditeur glisser-déposer de SeedProd affichera un aperçu en direct de votre page à droite et plusieurs blocs et paramètres à gauche.
Depuis le menu de gauche, vous pouvez faire glisser de nouveaux blocs de contenu sur votre design, tels que des compteurs, des boutons de partage social, des formulaires de contact, et plus encore.
Pour personnaliser un bloc que votre modèle utilise déjà, cliquez dessus, et vous verrez ses paramètres de personnalisation dans la barre latérale de gauche.
Par exemple, vous pouvez modifier le contenu et les couleurs d'un bloc, ajouter des images d'arrière-plan ou modifier le schéma de couleurs et les polices pour mieux correspondre à votre marque.
Pour ajouter des polices d'icônes Font Awesome à votre page, trouvez le bloc « Icône » dans la colonne de gauche et faites-le glisser sur votre design.
Vous verrez une icône « Flèche » par défaut, mais vous pouvez cliquer dessus pour la remplacer par une meilleure icône Font Awesome qui répond à vos besoins.
Avec le bloc d'icônes sélectionné, allez dans le panneau des paramètres, survolez le bouton « Bibliothèque d'icônes » et cliquez dessus.
Vous verrez maintenant une bibliothèque de différentes icônes Font Awesome que vous pouvez utiliser. Faites simplement défiler la bibliothèque ou tapez le nom d'une icône spécifique dans la boîte de recherche pour trouver la police d'icône dont vous avez besoin.
À partir de là, cliquez dessus, et SeedProd l'ajoutera à votre mise en page.
Après avoir sélectionné une icône, vous pouvez personnaliser la couleur, la taille, l'alignement et le lien de l'icône.
Alternativement, vous pouvez utiliser la Boîte d'icônes de SeedProd pour ajouter des icônes de polices avec un titre et une description. Vous pouvez personnaliser le bloc de la même manière que le bloc d'icônes, mais inclure également des informations supplémentaires pour vos visiteurs.
Continuez à travailler sur votre page jusqu'à ce que vous soyez satisfait de l'apparence de tout.
Voici d'autres façons d'utiliser SeedProd pour ajouter des polices d'icônes dans votre thème WordPress :
Utilisez le bloc Profils Sociaux pour ajouter des icônes de médias sociaux personnalisées à votre site Web.
Personnalisez votre en-tête et utilisez le bloc Panier de Menu pour ajouter un article de panier d'achat au menu de votre boutique en ligne.
Étape 4. Publiez vos modifications
Lorsque vous êtes satisfait de votre page, cliquez sur le bouton Enregistrer du constructeur de pages, puis sélectionnez « Publier » pour rendre votre page visible sur votre site WordPress.
À partir de là, vous pouvez visiter votre nouvelle page pour voir à quoi elle ressemble.
Méthode alternative : Utilisation du plugin Font Awesome
Une autre façon d'ajouter des polices d'icônes à votre site Web consiste à utiliser le plugin WordPress Font Awesome. Avec cette méthode, vous pouvez utiliser des polices d'icônes dans vos articles et pages, mais vous n'aurez pas le même niveau de contrôle et de personnalisation qu'avec la première méthode.
Cela dit, c'est une excellente solution si vous souhaitez utiliser autre chose qu'un plugin de création de pages.
Pour commencer, téléchargez la dernière version de Font Awesome depuis le répertoire des plugins WordPress et activez-la sur votre site Web.
Après avoir activé le plugin, vous pouvez créer ou modifier n'importe quel article ou page et utiliser le bloc Shortcode WordPress pour ajouter le shortcode d'icône Font Awesome.
Cliquez simplement sur l'icône « + » et recherchez « Shortcode », puis cliquez dessus lorsque le bloc apparaît.
Une fois que vous avez fait cela, vous pouvez ajouter n'importe quelle icône en copiant et collant l'extrait de shortcode suivant :
[icon name= "rocket"]
Tout ce que vous avez à faire est de remplacer « rocket » par le nom de l'icône que vous souhaitez afficher. Pour obtenir le nom de l'icône, visitez le CDN du site Web Font Awesome : fontawesome.com/icons et cliquez sur l'icône gratuite que vous souhaitez utiliser.
À partir de là, copiez le nom de l'icône pour l'enregistrer dans votre presse-papiers.
Vous pouvez maintenant coller le nom dans le bloc shortcode et cliquer sur Publier pour mettre vos modifications en ligne.
Vous pouvez maintenant visiter votre article pour voir l'icône en action.
FAQ sur l'ajout de Font Awesome à WordPress
functions.php ou en la liant au CDN.[icon name="coffee"], ou en collant du HTML tel que <i class="fas fa-coffee"></i>. Chaque méthode fonctionne sur les éditeurs WordPress modernes et peut être stylisée avec des classes CSS.fa-2x pour des icônes plus grandes ou fa-spin pour des effets de rotation.J'espère que ce guide vous a aidé à apprendre comment ajouter Font Awesome dans WordPress rapidement et facilement. Avant de partir, vous pourriez également apprécier ce guide sur la façon de modifier un menu dans WordPress pour personnaliser les éléments de votre menu.
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.
