Les polices d’icônes sont l’un des outils les plus efficaces de notre boîte à outils de conception WordPress, et elles peuvent également être les vôtres.
Elles sont plus qu’un simple plaisir pour les yeux – elles sont redimensionnables, se chargent rapidement comme les polices web et ne ralentissent pas votre site comme le font les icônes traditionnelles. De plus, vous pouvez les styliser à l’aide de CSS pour obtenir exactement l’aspect que vous souhaitez.
Nous avons découvert deux méthodes fiables pour ajouter des polices d’icônes à WordPress, et cet article vous montrera comment faire.
Qu’est-ce qu’une police d’icônes et pourquoi l’utiliser ?
Les conteneurs d’icônes contiennent des symboles ou de petites images au lieu de lettres et de chiffres.
Vous pouvez utiliser ces polices d’icônes de différentes manières. Par exemple, vous pouvez les utiliser pour votre panier d’achat, vos boutons de téléchargement, vos boîtes de caractéristiques, vos concours et même vos menus de navigation WordPress.
WordPress utilise d’ailleurs des icônes de police dans sa zone d’administration.
La plupart des internautes comprendront immédiatement la signification d’une icône couramment utilisée, ce qui facilitera la navigation sur votre site. Elles peuvent également vous aider à créer un site multilingue, car la plupart des gens comprendront les polices d’icônes courantes, quelle que soit leur langue.
Par rapport aux icônes basées sur des images, les icônes de police se chargent beaucoup plus rapidement, de sorte qu’elles peuvent stimuler la vitesse et les performances de WordPress.
Il existe plusieurs jeux de polices d’icônes open-source que vous pouvez utiliser gratuitement, mais dans ce guide, nous utiliserons Font Awesome car c’est le jeu d’icônes open-source le plus populaire.
Ceci étant dit, voyons comment vous pouvez facilement ajouter des polices d’icônes à votre thème WordPress. Il suffit d’utiliser les liens rapides pour passer directement à la méthode que vous souhaitez utiliser :
Méthode 1. Ajouter des polices d’icônes à l’aide d’une extension WordPress (gratuite et facile)
La manière la plus simple d’ajouter des polices d’icônes personnalisées à WordPress est d’utiliser l’extension Font Awesome.
Cette extension vous permet d’utiliser des polices d’icônes gratuites dans vos pages et publications sans modifier les fichiers de votre thème WordPress. Vous obtiendrez également toutes les nouvelles icônes Font Awesome automatiquement à chaque mise à jour de l’extension.
La première chose à faire est d’ajouter Font Awesome à WordPress. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
Une fois activé, vous pouvez ajouter une icône Font Awesome à n’importe quel bloc de code court. Il suffit d’ouvrir la page ou la publication où vous souhaitez afficher la police de l’icône, puis de cliquer sur l’icône » + « .
Vous pouvez désormais rechercher « code court » et sélectionner le bloc adéquat lorsqu’il apparaît.
Ceci fait, vous pouvez ajouter n’importe quelle icône Font Awesome en utilisant le code court suivant :
[icon name="rocket"]
Remplacez simplement « rocket » par le nom de l’icône que vous souhaitez afficher. Pour obtenir ce nom, rendez-vous dans la Bibliothèque Font Awesome et cliquez sur l’icône que vous souhaitez utiliser.
Dans la fenêtre qui s’affiche, cliquez sur l’icône.
Font Awesome copiera alors automatiquement le nom dans votre presse-papiers.
Une fois cela fait, il suffit de coller le nom dans le code court. Vous pouvez maintenant cliquer sur « Publier » ou « Mettre à jour » pour rendre la police d’icônes directe.
Il peut arriver que vous souhaitiez afficher une police d’icônes à l’intérieur d’un bloc de texte. Par exemple, vous pouvez avoir besoin d’afficher un symbole de « copyright » après un nom de marque.
Pour ce faire, il suffit de coller le code court à l’intérieur de n’importe quel bloc de paragraphe.
Vous pouvez ensuite utiliser les paramètres du menu de droite pour personnaliser l’icône, de la même manière que vous personnalisez les options des blocs de texte. Par exemple, vous pouvez modifier la couleur du texte, la taille de la police et la couleur d’arrière-plan dans WordPress.
WordPress transformera le code court en une icône Font Awesome et l’affichera à côté de votre texte.
Une autre option consiste à ajouter le code court à n’importe quelle zone prête à accueillir un widget.
Par exemple, vous pouvez ajouter un bloc de codes courts à la colonne latérale de votre site ou à une section similaire.
En savoir plus, veuillez consulter notre guide sur l’utilisation des codes courts dans vos widgets de la colonne latérale de WordPress.
Vous pouvez même ajouter le code court de l’icône aux colonnes et créer de magnifiques boîtes de fonctionnalité.
Pour des instructions détaillées, consultez notre guide sur l’ajout de boîtes de fonctionnalité avec des icônes dans WordPress.
De nombreux sites utilisent des polices d’icônes dans leurs menus, afin d’aider les internautes à trouver leur chemin. Pour ajouter une icône, créez un nouveau menu ou ouvrez un menu existant dans le Tableau de bord WordPress.
Pour obtenir des instructions étape par étape, consultez notre guide du débutant sur l’ajout d’un menu de navigation dans WordPress.
Sur la page Apparence « Menus , cliquez sur » Options d’écran « , puis cochez la case située à côté de » Classes CSS « .
Ceci fait, il suffit de cliquer pour déplier l’élément de menu dans lequel vous souhaitez afficher l’icône.
Vous devriez maintenant voir un nouveau champ « Classes CSS ».
Pour obtenir la classe CSS d’une icône, il suffit de trouver la police de l’icône sur le site Font Awesome et de cliquer dessus. Si vous le souhaitez, vous pouvez modifier le style de l’icône en cliquant sur les différents Réglages.
Dans la fenêtre surgissante, vous verrez un extrait de code HTML. La classe CSS est simplement le texte entre les guillemets. Par exemple, dans l’image suivante, la classe CSS est fa-solid fa-address-book
.
Il suffit de copier le texte à l’intérieur des guillemets, puis de revenir au Tableau de bord WordPress.
Vous pouvez maintenant coller le texte dans le champ « Classes CSS ».
Pour ajouter d’autres polices d’icônes, il suffit de suivre la même procédure que celle décrite ci-dessus.
Lorsque vous êtes satisfait de la façon dont le menu est configuré, cliquez sur » Enregistrer « . Maintenant, si vous visitez votre site WordPress, vous verrez le menu de navigation mis à jour.
Méthode 2. Utiliser les polices d’icônes avec SeedProd (plus personnalisable)
Si vous souhaitez avoir la liberté d’utiliser des icônes de police n’importe où sur votre site, nous vous recommandons d’utiliser une extension de constructeur de page.
SeedProd est le meilleur constructeur de page WordPress par glisser-déposer sur le marché et dispose de plus de 1400 icônes Font Awesome intégrées. Il dispose également d’un bloc d’Icône prêt à l’emploi que vous pouvez ajouter à n’importe quelle page en utilisant le glisser-déposer.
Avec SeedProd, vous pouvez également créer un thème WordPress personnalisé qui correspond au design de votre site souhaité.
La première chose à faire est d’installer et d’activer l’extension. Pour plus de détails, consultez notre guide du débutant sur l’installation d’une extension WordPress.
Note : Il existe une version gratuite de SeedProd, mais nous utiliserons la version Pro car elle est livrée avec le bloc Icône.
Une fois activé, allez dans SeedProd » Réglages et saisissez votre clé de licence.
Vous pouvez trouver cette information dans votre compte sur le site de SeedProd. Après avoir saisi/saisie la clé de licence, cliquez sur le bouton « Vérifier la clé ».
Ensuite, vous devez vous rendre sur SeedProd » Pages et cliquer sur le bouton » Ajouter une nouvelle page d’atterrissage « .
Vous pouvez maintenant choisir un modèle qui servira de base à votre page. SeedProd dispose de plus de 350+ modèles professionnellement conçus que vous pouvez personnaliser en fonction des besoins de votre blog ou site WordPress.
Par exemple, vous pouvez créer une page d’atterrissage de liste d’attente virale, une page squeeze, ou même une page d’erreur 404 personnalisée pour maintenir l’engagement des utilisateurs.
Pour sélectionner un modèle, survolez-le avec votre souris, puis cliquez sur l’icône « Coche ».
Nous utilisons le modèle « Ebook Sales Page » dans toutes nos images, car il est parfait pour la vente de produits numériques. Toutefois, vous pouvez utiliser le modèle de votre choix.
Ensuite, allez de l’avant et tapez un nom pour la page personnalisée. SeedProd créera automatiquement une URL basée sur le titre de la page, mais vous pouvez modifier cette URL comme bon vous semble.
Lorsque vous êtes satisfait des modifications saisies, cliquez sur le bouton « Enregistrer et commencer à modifier la page ».
Ensuite, vous serez dirigé vers le constructeur de page par drag-and-drop de SeedProd, où vous pourrez personnaliser le Modèle.
L’éditeur SeedProd affiche une Prévisualisation directe de votre dessin à droite et quelques Réglages de blocs à gauche.
Le menu de gauche propose également des blocs que vous pouvez faire glisser sur votre dessin.
Vous pouvez faire glisser et déposer des blocs standard tels que des boutons et des images ou utiliser des blocs avancés tels que le formulaire de contact, le compte à rebours, les boutons de partage des médias sociaux, et plus encore.
Pour personnaliser un bloc, il suffit de cliquer pour le sélectionner dans votre mise en page.
Le menu de gauche affiche alors tous les Réglages que vous pouvez utiliser pour personnaliser ce bloc. Par exemple, vous pouvez souvent modifier les couleurs d’arrière-plan, ajouter des images d’arrière-plan ou modifier le jeu de couleurs et les polices pour mieux correspondre à votre marque.
Pour ajouter une police d’icône à la page, il suffit de trouver le bloc « Icône » dans la colonne de gauche et de le faire glisser sur votre mise en page.
SeedProd affiche par défaut une icône en forme de flèche.
Pour afficher une autre icône Font Awesome à la place, il suffit de cliquer pour sélectionner le bloc Icône.
Dans le menu de gauche, survolez l’icône et cliquez sur le bouton « Bibliothèque d’icônes » lorsqu’il apparaît.
Vous verrez maintenant toutes les différentes icônes Font Awesome que vous pouvez choisir.
Il suffit de trouver l’icône de la police que vous souhaitez utiliser et de cliquer dessus.
SeedProd va maintenant ajouter l’icône à votre mise en page.
Après avoir choisi une icône, vous pouvez modifier son alignement, sa couleur et sa taille à l’aide des Réglages du menu de gauche.
Vous pouvez également ajouter un lien vers l’icône de la police en tapant dans le champ « Link » du menu de gauche.
Une autre option consiste à utiliser la boîte à icônes prête à l’emploi de SeedProd.
Elle vous permet de saisir du texte et d’afficher une icône de police à côté, ce qui en fait un excellent choix pour les boîtes de fonctionnalité.
Il suffit de trouver la boîte à icônes dans le menu de gauche et de la faire glisser sur votre mise en page.
Vous pouvez ensuite cliquer pour sélectionner le bloc et modifier l’icône en suivant le même processus que celui décrit ci-dessus.
Vous pouvez ensuite saisir l’en-tête et le corps du texte.
Vous pouvez également modifier le remplissage et la marge du bloc, ajouter des animations CSS, etc. en sélectionnant l’onglet « Avancé ».
Vous pouvez continuer à travailler sur la page en ajoutant d’autres blocs et en personnalisant ces blocs dans le menu de gauche.
Lorsque vous êtes satisfait de l’aspect de la page, cliquez sur le bouton « Enregistrer ». Vous pouvez ensuite sélectionner « Publier » pour rendre cette page En direct.
Alternative : Utiliser des icônes SVG
Une autre façon d’ajouter des images d’icônes à WordPress est d’utiliser des icônes SVG. Il s’agit d’un format d’image couramment utilisé pour les graphiques vectoriels.
De nombreuses personnes utilisent les icônes vectorielles SVG plutôt que les polices d’icônes lorsqu’elles souhaitent ajouter plusieurs couleurs à leurs icônes. Ces fichiers sont également connus pour être plus favorables au SEO et nécessitent uniquement moins de demandes de serveur pour être chargés que d’autres icônes images.
Si vous souhaitez en savoir plus sur le SVG, vous pouvez consulter notre guide étape par étape sur l ‘ajout de fichiers images SVG dans WordPress.
Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter des polices d’icônes à votre thème WordPress. Vous pouvez également consulter notre guide sur les meilleurs constructeurs de thèmes WordPress et comment changer les polices de caractères dans votre thème WordPress.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Shraddha Patil
Very Helpful! I was searching for such solutions. Glad I found it here. Thank you!!
WPBeginner Support
Glad our guide was helpful
Administrateur
Juan
Hi there, many thanks for suych a great explanation.
But I don´t understand something.
On the wp_enqueue_style() function, the first parameter is a string called ‘wpb-fa’. I looked on the documentation and it is supposed to be the name of the stylesheet. But I don´t understand. What is this name for? Is mandatory to be named that way in this case? The stylesheet isn´t named « style.css »?
Sorry for the noob questions.
Thanks
WPBeginner Support
The wpb-fa is the unique name for the script, that section is not for the name of the stylesheet
Administrateur
M. Hridoy
Hi,
This is Great! Thanks for your awesome resourceful worth reading post.Indeed a timely and useful post which I could pick up some valuable information on this subject. Keep updating new suggestions with us…
WPBeginner Support
Thank you and you’re welcome
Administrateur
drkumar kumar
nice article , thanks for sharing
WPBeginner Support
Thank you, glad you liked our article
Administrateur
Niranjan G Vala
Hello wp beginners support team, I am visually impaired web designer.
Have read this whole artical but still want some help regarding integrating the font icons in my website.
I want to use Font Awesome with my theme. and already followed the steps provided above in artical.
The icons are working in post and pages vary fine but i want to use it in menus.
Here what I have done with css.
.shoppingcart::before {
font-family: FontAwesome;
content: « \f07a »;
color: #ffffff;
}
But still it didn’t worked. Then what I have done wrong?
Please assist me out of this problem.
I will always appreciate.
Vary Thank you all at wp beginners.
WPBeginner Support
Hi Niranjan,
An easier way to add Font Awesome is to add its CSS classes to invidual menu items. After enqueuing font stylesheet.
Go to Appearance » Menus page and click on Screen Options button. From there make sure that CSS Classes check box is checked.
Next click to expand an individual menu item and you will notice the option to add CSS classes. Each font-awesome icon has its own CSS class for exmaple, fa fa-lg fa-home CSS classes will be used for home icon. You can find them all on Font Awesome website.
After adding CSS class you can use those classes in your custom CSS to style the icons.
Administrateur
Niranjan G Vala
First thanks to all at WP Beginners for your valuable response. And sorry for late feedback. Unfortunately I was not able to reply quickly because the mail was in the spam folder. Now it works fine and i’m able to use font awesome in navigation menus.
One suggestion is that please mention the accessibility level of plugins/themes when you post an artical. Wordpress core is fully accessible but 60% of plugins and themes are not following the web accessibility guidelines (WCAG 2.0) witch is the recommendation of world wide web consortium (w3.org). Or please add skip links on your website for better accessibility. Making websites accessible will help lot to persons with disabilities like myself to navigate the website lot easier. Thanks.
ripon
in a website there should have font awesome icon. I want to make that dynamic. I want to change that icon from wordpress control panel. like why choose us section there should have responsive design font icon. I want to change that from wordpress theme option.
Tobias
Hi, awesome tutorial, thank you!
Can you help me?
I used this line of the code « -o-transform: scale(1); » to scale my icons in Opera properly, however it didn’t help me. Maybe it is because of specifically these icons, that I am using –
Is it possible that something is wrong with them? What do you think? And thanks for your tutorial!
valldahi
Thank you very much Isy. methode 1
Nrusingh Pr Acharya
Thanks for this method. I inserted FA manually because better is not in support anymore with WP v4.7.
I am following your tutorials from first, and I’m pretty much confident in Wordpress now. Thanks.
zeniwo
A very informative article , it really helped me in clearing my doubts about adding icon fonts in wordpress themes . Bloggers like you help hundreds of new and budding bloggers like me to understand things and move ahead . Thank you very much for this useful article.
WPBeginner Support
Glad you found it helpful
Administrateur
Rhonda
Thank you! I’ve been trying to understand how to use the font icons and this was straight forward and helpful.
WPBeginner Support
Glad you found it helpful
Administrateur
Kobe
Thanks for this post. It was really useful. I’ve been using Better Fonts Awesome plugin and it helped me much. But then I needed to form my content into responsive columns and I started to search for plugin that will allow me to do that. Accidentally I came across MotoPress Editor. Actually I do not like visual editors due to dependency on them but it saved me as I could form the columns visually and use Font Awesome Icons, selecting sizes and colors easily. Thank you again for good job.