Comment ajouter facilement des polices Icône dans votre thème WordPress

Voulez-vous ajouter des polices de caractères sous forme d’icônes à votre site WordPress ?

Les polices Icône sont redimensionnables et se chargent comme les polices Web, de sorte qu’elles ne ralentissent pas votre site. Vous pouvez même les styliser à l’aide de CSS pour obtenir exactement l’aspect que vous souhaitez.

Dans cet article, nous allons vous afficher comment ajouter facilement des polices d’icônes dans votre thème WordPress.

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 avec votre panier d’achat, des boutons de téléchargement, des boîtes de fonctionnalité, des concours de cadeaux, et même des 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 dans 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 (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 surgissante, cliquez sur le nom de 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 réglages 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 taille de la police et la couleur de l’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.

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 « .

Maintenant, vous pouvez choisir un modèle à utiliser comme base pour votre page. SeedProd dispose de plus de 300+ modèles professionnellement conçus que vous pouvez personnaliser en fonction des besoins de votre blog ou site WordPress.

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 de livre électronique » 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 réseaux 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 l’espacement et la couleur du texte 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 dans votre thème WordPress. Vous pouvez également parcourir notre guide sur les meilleures extensions de fenêtres surgissantes comparées et comment choisir le meilleur logiciel de création de sites web.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.