Comment ajouter facilement des polices d'icônes à votre thème WordPress

Lorsque nous examinons des sites Web WordPress utilisant des fichiers image ordinaires pour leurs icônes, nous ne pouvons nous empêcher de penser qu'ils manquent quelque chose de mieux.

C'est parce que les polices d'icônes sont le choix le plus judicieux : elles se chargent plus rapidement, sont plus nettes sur n'importe quel écran, et vous pouvez facilement changer leur taille ou leur couleur en quelques clics.

De nombreux propriétaires de sites Web utilisent encore des icônes d'image à l'ancienne parce qu'ils n'ont pas entendu parler des options plus faciles qui existent. Grâce aux polices d'icônes modernes, vous pouvez désormais ajouter de belles icônes à votre site sans le ralentir.

Dans ce guide, nous vous montrerons les moyens les plus simples d'ajouter des polices d'icônes à votre thème WordPress. Nous avons testé ces méthodes nous-mêmes, et elles fonctionnent parfaitement avec n'importe quel thème que vous pourriez utiliser.

Que sont les polices d'icônes et pourquoi devriez-vous les utiliser ?

Les polices 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 nombreuses manières différentes. Par exemple, vous pouvez les utiliser avec votre panier, vos boutons de téléchargement, vos boîtes de fonctionnalités, vos concours, et même les menus de navigation WordPress.

En fait, WordPress utilise des polices d'icônes dans sa zone d'administration.

La plupart des visiteurs comprendront immédiatement ce que signifie une icône couramment utilisée, ce qui leur permettra de naviguer plus facilement sur votre site. Ils peuvent également vous aider à créer un site web multilingue car la plupart des gens comprendront les polices d'icônes courantes quelle que soit la langue qu'ils parlent.

Comparées aux icônes basées sur des images, les icônes de polices se chargent beaucoup plus rapidement, ce qui peut améliorer la vitesse et les performances de WordPress.

Il existe plusieurs ensembles de polices d'icônes open-source que vous pouvez utiliser gratuitement, mais dans ce guide, nous utiliserons Font Awesome car c'est l'ensemble d'icônes open-source le plus populaire.

Cela dit, voyons comment vous pouvez facilement ajouter des polices d'icônes à votre thème WordPress. Utilisez simplement les liens rapides pour accéder directement à la méthode que vous souhaitez utiliser :

• Méthode 1. Ajout de polices d'icônes à l'aide d'un plugin WordPress (gratuit et facile)
• Method 2. Using Icon Fonts with SeedProd (More Customizable)

Méthode 1. Ajout de polices d'icônes à l'aide d'un plugin WordPress (gratuit et facile)

Le moyen le plus simple d'ajouter des polices d'icônes personnalisées à WordPress est d'utiliser le plugin Font Awesome.

Ce plugin vous permet d'utiliser des polices d'icônes gratuites sur vos pages et articles sans modifier les fichiers de votre thème WordPress. Vous obtiendrez également toutes les nouvelles icônes Font Awesome automatiquement chaque fois que vous mettrez à jour le plugin.

La première chose à faire est d'ajouter Font Awesome à WordPress. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après activation, vous pouvez ajouter une icône Font Awesome à n'importe quel bloc de shortcode. Ouvrez simplement la page ou l'article où vous souhaitez afficher la police d'icônes, puis cliquez sur l'icône '+'.

Vous pouvez maintenant rechercher 'Shortcode' et sélectionner le bon bloc lorsqu'il apparaît.

Une fois cela fait, vous pouvez ajouter n'importe quelle icône Font Awesome en utilisant le shortcode suivant :

[icon name="rocket"]

Remplacez simplement "rocket" par le nom de l'icône que vous souhaitez afficher. Pour obtenir le nom, rendez-vous sur la bibliothèque Font Awesome et cliquez sur l'icône que vous souhaitez utiliser.

Dans la fenêtre contextuelle qui apparaît, cliquez sur l'icône.

Font Awesome copiera maintenant automatiquement le nom dans votre presse-papiers.

Une fois cela fait, collez simplement le nom dans le shortcode. Vous pouvez maintenant cliquer sur 'Publier' ou 'Mettre à jour' pour rendre la police d'icônes visible.

Parfois, vous voudrez peut-être afficher une police d'icônes dans un bloc de texte. Par exemple, vous pourriez avoir besoin d'afficher un symbole de 'copyright' après un nom de marque.

Pour ce faire, collez simplement le shortcode à 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 changer la couleur du texte, la taille de la police, et la couleur d'arrière-plan dans WordPress.

WordPress transformera le shortcode en une icône Font Awesome et l'affichera à côté de votre texte.

Une autre option consiste à ajouter le shortcode à n'importe quelle zone prête pour les widgets.

Par exemple, vous pouvez ajouter un bloc Shortcode à la barre latérale de votre site ou à une section similaire.

Pour plus d'informations, veuillez consulter notre guide sur comment utiliser les shortcodes dans vos widgets de barre latérale WordPress.

Vous pouvez même ajouter le shortcode d'icône aux colonnes et créer de belles boîtes de fonctionnalités.

Pour des instructions détaillées, consultez notre guide sur comment ajouter des boîtes de fonctionnalités avec des icônes dans WordPress.

De nombreux sites Web utilisent des polices d'icônes dans leurs menus, pour aider les visiteurs à s'orienter. Pour ajouter une icône, créez un nouveau menu ou ouvrez un menu existant dans le tableau de bord WordPress.

Pour des instructions étape par étape, consultez notre guide pour débutants sur comment ajouter un menu de navigation dans WordPress.

Sur la page Apparence » Menus, cliquez sur « Options de l'écran » puis cochez la case à côté de « Classes CSS ».

Une fois cela fait, cliquez simplement pour développer l'élément de menu où vous souhaitez afficher l'icône.

Vous devriez maintenant voir un nouveau champ « Classes CSS ».

Pour obtenir la classe CSS d'une icône, trouvez simplement la police d'icônes sur le site Web Font Awesome et cliquez dessus. Si vous le souhaitez, vous pouvez ensuite modifier le style de l'icône en cliquant sur les différents paramètres.

Dans la fenêtre contextuelle, 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.

Copiez simplement le texte entre les guillemets, puis revenez au tableau de bord WordPress.

Vous pouvez maintenant coller le texte dans le champ « Classes CSS ».

Pour ajouter d'autres polices d'icônes, suivez simplement le même processus décrit ci-dessus.

Lorsque vous êtes satisfait de la configuration du menu, cliquez sur « Enregistrer ». Maintenant, si vous visitez votre site Web WordPress, vous verrez le menu de navigation mis à jour.

Méthode 2. Utilisation de polices d'icônes avec SeedProd (plus personnalisable)

Si vous souhaitez avoir la liberté d'utiliser des polices d'icônes n'importe où sur votre site, nous vous recommandons d'utiliser un plugin de création de pages.

SeedProd est le meilleur constructeur de pages WordPress par glisser-déposer du marché et il intègre plus de 1400 icônes Font Awesome. Il dispose également d'un bloc d'icônes prêt à l'emploi que vous pouvez ajouter à n'importe quelle page par glisser-déposer.

Plusieurs de nos marques partenaires ont créé l'intégralité de leurs sites Web en l'utilisant, et ils ont eu d'excellentes expériences. Pour plus de détails, consultez notre avis sur SeedProd.

La première chose à faire est d'installer et d'activer le plugin. Pour plus de détails, consultez notre guide pour débutants sur comment installer un plugin WordPress.

Une fois activé, allez dans SeedProd » Paramètres et entrez votre clé de licence.

Vous pouvez trouver ces informations dans votre compte sur le site Web de SeedProd. Après avoir saisi la clé de licence, cliquez sur le bouton « Vérifier la clé ».

Ensuite, vous devez visiter SeedProd » Pages et cliquer sur le bouton « Ajouter une nouvelle page de destination ».

Vous pouvez maintenant choisir un modèle pour servir de base à votre page. SeedProd propose plus de 350 modèles conçus par des professionnels que vous pouvez personnaliser en fonction des besoins de votre blog ou site WordPress.

Par exemple, vous pouvez créer une page de destination pour une liste d'attente virale, une page de capture, 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 « Page de vente d'ebook » dans toutes nos images, car il est parfait pour vendre des produits numériques. Cependant, vous pouvez utiliser le design de votre choix.

Ensuite, 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 vous le souhaitez.

Lorsque vous êtes satisfait des informations saisies, cliquez sur le bouton « Enregistrer et commencer à modifier la page ».

Ensuite, vous serez dirigé vers l'éditeur de page par glisser-déposer de SeedProd, où vous pourrez personnaliser le modèle.

L'éditeur SeedProd affiche un aperçu en direct de votre design à droite et certains paramètres de blocs à gauche.

Le menu de gauche contient également des blocs que vous pouvez faire glisser sur votre design.

Vous pouvez faire glisser et déposer des blocs standard comme des boutons et des images, ou utiliser des blocs avancés tels que le formulaire de contact, le compte à rebours, les boutons de partage sur les réseaux sociaux, et plus encore.

Pour personnaliser un bloc, cliquez simplement dessus pour le sélectionner dans votre mise en page.

Le menu de gauche affiche désormais tous les paramètres que vous pouvez utiliser pour personnaliser ce bloc. Par exemple, vous pouvez souvent changer les couleurs d'arrière-plan, ajouter des images d'arrière-plan ou changer le schéma de couleurs et les polices pour mieux correspondre à votre marque.

Pour ajouter une icône de police à la page, trouvez simplement le bloc « Icône » dans la colonne de gauche, puis faites-le glisser sur votre mise en page.

SeedProd affichera une icône en forme de « flèche » par défaut.

Pour afficher une autre icône Font Awesome à la place, cliquez simplement pour sélectionner le bloc Icône.

Dans le menu de gauche, survolez l'icône avec votre souris, puis cliquez sur le bouton « Bibliothèque d'icônes » lorsqu'elle apparaît.

Vous verrez maintenant toutes les différentes icônes Font Awesome parmi lesquelles vous pouvez choisir.

Trouvez simplement l'icône de police que vous souhaitez utiliser et cliquez dessus.

SeedProd ajoutera maintenant 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 paramètres du menu de gauche.

Vous pouvez également ajouter un lien à l'icône de police en tapant dans le champ « Lien » du menu de gauche.

Une autre option consiste à utiliser la boîte d'icônes prête à l'emploi de SeedProd.

Cela vous permet de taper du texte, puis d'afficher une icône de police à côté, ce qui en fait un excellent choix pour les boîtes de fonctionnalités.

Trouvez simplement la boîte d'icônes dans le menu de gauche et faites-la glisser sur votre mise en page.

Vous pouvez ensuite cliquer pour sélectionner le bloc et changer l'icône en suivant le même processus décrit ci-dessus.

Après cela, vous pouvez taper le texte de l'en-tête et du corps.

Vous pouvez également modifier le remplissage et la marge du bloc, ajouter des animations CSS, et plus encore 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'apparence de la page, cliquez sur le bouton « Enregistrer ». Vous pouvez ensuite sélectionner « Publier » pour rendre cette page publique.

Alternative : Utiliser des icônes SVG

Une autre façon d'ajouter des icônes à WordPress est d'utiliser des icônes SVG. Abréviation de scalable vector format, c'est un format d'image couramment utilisé pour les graphiques vectoriels.

Beaucoup de gens utilisent des icônes vectorielles SVG plutôt que des polices d'icônes lorsqu'ils souhaitent ajouter plusieurs couleurs à leurs icônes. Ces fichiers sont également connus pour être plus optimisés pour le SEO et nécessitent moins de requêtes serveur pour se charger que d'autres icônes d'image.

Si vous souhaitez en savoir plus sur les SVG, vous pouvez consulter notre guide étape par étape sur la manière d'ajouter des fichiers image 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 dans votre thème WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.