Voulez-vous utiliser des polices d’icônes dans l’éditeur de publication WordPress ?
Les polices d’icônes vous permettent d’utiliser facilement des images et des symboles dans le texte. Ils sont légers et ne ralentiront pas votre site, et ils peuvent être facilement mis à l’échelle à n’importe quelle taille et stylisés comme n’importe quelle autre police de texte.
Dans cet article, nous allons vous montrer comment utiliser facilement les polices d’icônes dans l’éditeur de publication WordPress sans écrire de code HTML.
Nous allons vous montrer plusieurs méthodes, chacune utilisant une approche légèrement différente de l’autre. Vous pouvez choisir celui qui vous convient le mieux.
Méthode 1. Ajout de polices d’icônes dans WordPress Post Editor à l’aide d’icônes JVM Rich Text
Cette méthode est recommandée sur tout type de site Web WordPress. Il est facile à utiliser et fonctionne de manière transparente avec l’éditeur de blocs.
Tout d’abord, vous devez installer et activer le plug-in JVM Rich Text Icons. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, vous pouvez simplement modifier un article ou une page WordPress ou en créer un nouveau. Dans l’éditeur de publication, ajoutez un nouveau bloc de paragraphe et vous verrez une nouvelle icône de drapeau dans la barre d’outils du bloc.
En cliquant dessus, une fenêtre contextuelle d’icônes parmi lesquelles choisir s’affichera. Il utilise par défaut les polices d’icônes populaires Font Awesome.
Vous pouvez utiliser la recherche pour rechercher une icône ou simplement faire défiler vers le bas pour trouver l’icône souhaitée, puis cliquer pour l’ajouter.
L’un des avantages de l’utilisation des polices d’icônes est que vous pouvez utiliser CSS pour les styliser.
Cependant, puisque vous utilisez déjà l’éditeur de blocs, vous pouvez simplement utiliser les outils de couleur intégrés pour styliser les icônes.
Le plugin vous permet d’utiliser des polices d’icônes dans la plupart des blocs de texte tels que Paragraphe, Liste, Bouton, Colonnes, Couverture, etc.
Voici un exemple d’utilisation de polices d’icônes et d’options de bloc pour styliser trois colonnes.
Un autre exemple utile d’utilisation des polices d’icônes concerne les boutons.
Cette fois, nous utilisons des polices d’icônes en ligne avec du texte pour les deux boutons.
N’hésitez pas à utiliser les outils de l’éditeur de blocs tels que l’alignement du texte, les couleurs, l’espacement, etc. pour tirer le meilleur parti des polices d’icônes.
Méthode 2. Ajouter des polices d’icônes dans WordPress Post Editor avec Font Awesome
Cette méthode nécessite que vous ajoutiez des shortcodes dans l’éditeur de publication pour afficher les polices d’icônes. Vous pouvez utiliser cette méthode si vous n’avez pas besoin d’utiliser régulièrement des polices d’icônes dans vos articles et pages WordPress.
Tout d’abord, vous devez installer et activer le plugin Font Awesome. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, vous pouvez modifier un article ou une page dans WordPress et utiliser le shortcode suivant pour ajouter une icône de police.
Le paramètre de nom ici est le nom de la police utilisée par Font Awesome. Vous pouvez trouver la liste complète sur la page de feuille de triche de Font Awesome.
Une fois ajouté, vous pouvez prévisualiser votre publication ou votre page pour voir à quoi ressemblera l’icône sur le site en direct, car elle ne s’affichera pas sous forme d’icône dans l’éditeur de blocs.
Voici à quoi cela ressemblait sur notre site de test.
Vous pouvez utiliser le shortcode dans un paragraphe et en ligne avec un autre texte. Vous pouvez également l’ajouter seul en utilisant le bloc ‘Shortcode’.
Cependant, l’utilisation du bloc ‘Shortcode’ ne vous donnera pas les options de style que vous obtiendrez avec d’autres blocs de texte.
Vous pouvez également ajouter le shortcode à l’intérieur des colonnes pour créer une ligne de fonctionnalités.
Ce serait un peu plus délicat car vous ne pourrez pas voir les images réelles et les hauteurs de colonne continueront de changer dans l’éditeur.
Voici à quoi cela ressemblait sur notre site Web de test. Les colonnes ont la même hauteur, même si elles ne sont pas dans l’éditeur.
Vous devrez probablement prévisualiser votre travail plusieurs fois dans un nouvel onglet du navigateur pour voir à quoi il ressemblera pour les utilisateurs.
Méthode 3. Utilisation de polices d’icônes avec les constructeurs de pages WordPress
Cette méthode est idéale si vous créez une page de destination ou concevez votre site Web à l’aide d’un constructeur de pages WordPress comme SeedProd.
SeedProd est le meilleur constructeur de pages WordPress sur le marché. Il vous permet de créer facilement de belles pages de destination ou de concevoir votre site Web complet.
Tout d’abord, vous devez installer et activer le plugin SeedProd. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, il vous sera demandé d’entrer votre clé de licence de plugin. Vous pouvez trouver ces informations sous votre compte sur le site Web de SeedProd.
Après avoir saisi votre clé de licence et cliqué sur “Vérifier la clé”, vous pouvez commencer à travailler sur votre page de destination.
Allez simplement à la SeedProd » Pages de destination page et cliquez sur le bouton “Ajouter une nouvelle page de destination”.
Après cela, il vous sera demandé de choisir un modèle pour votre page de destination.
SeedProd est livré avec un tas de beaux designs que vous pouvez utiliser comme point de départ, ou vous pouvez commencer avec un modèle vierge et concevoir le tout vous-même.
Pour ce didacticiel, nous utiliserons un modèle préconçu. Cliquez simplement sur un modèle pour le sélectionner et continuer.
Ensuite, il vous sera demandé de fournir un titre pour votre page de destination et de choisir une URL.
Après les avoir saisis, cliquez sur le bouton “Enregistrer et commencer à modifier la page” pour continuer.
SeedProd va maintenant lancer l’interface du constructeur de page. Il s’agit d’un outil de conception par glisser-déposer où vous pouvez simplement pointer et cliquer sur n’importe quel élément pour le modifier.
Vous pouvez également faire glisser et déposer des blocs de la colonne de gauche pour ajouter de nouveaux éléments à votre conception.
Pour les besoins de ce tutoriel, nous allons ajouter le bloc Icon.
Après avoir ajouté le bloc, vous pouvez simplement cliquer pour modifier ses propriétés.
La colonne de gauche changera pour afficher les options du bloc Icône. Vous pouvez cliquer dans la section “Icône” à gauche et choisir une image d’icône différente ou changer la couleur et le style.
Une autre façon d’utiliser les icônes dans SeedProd est d’ajouter le bloc ‘Icon Box’.
La différence entre ceci et le bloc “Icône” que nous avons utilisé précédemment est que “Icon Box” vous permet d’ajouter du texte avec l’icône que vous avez choisie.
C’est l’une des façons les plus courantes d’utiliser des icônes lors de l’affichage des fonctionnalités du produit, des services et d’autres éléments.
Vous pouvez placer votre boîte à icônes dans des colonnes, choisir des couleurs et ajuster la taille de l’icône à votre guise.
De plus, vous pouvez également formater le texte d’accompagnement à l’aide de la barre d’outils de formatage de SeedProd.
Une fois que vous avez terminé de modifier votre page, n’oubliez pas de cliquer sur le bouton “Enregistrer” dans le coin supérieur droit de l’écran.
Si vous êtes prêt, vous pouvez cliquer sur “Publier” pour que la page soit mise en ligne, ou vous pouvez cliquer sur “Aperçu” pour vous assurer qu’elle ressemble à ce que vous voulez.
Vous pouvez également cliquer sur “Enregistrer en tant que modèle” afin de pouvoir réutiliser cette conception avec SeedProd sur d’autres parties de votre site Web.
Voici à quoi ressemblaient les polices d’icônes sur notre site Web de test.
Nous espérons que cet article vous a aidé à apprendre à utiliser les polices d’icônes dans l’éditeur de publication WordPress sans écrire de code HTML. Vous pouvez également consulter notre guide de performance WordPress pour optimiser la vitesse de votre site Web ou les meilleurs plugins de page de destination pour WordPress.
Si vous avez aimé cet article, veuillez vous abonner à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.