Comment utiliser les polices d'icônes dans WordPress Post Editor (sans code)
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. Elles sont légères et ne ralentiront pas votre site, et elles peuvent être facilement adaptées à n’importe quelle taille et stylées 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 de texte enrichi JVM
Il est recommandé d’utiliser cette méthode 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 plugin 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 une publication ou une page WordPress ou en créer une nouvelle. 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 de 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 codes courts 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 publications 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 une publication ou une page dans WordPress et utiliser le shortcode suivant pour ajouter une icône de police.
[icon name="home"]
Le paramètre name ici est le nom de la police utilisée par Font Awesome. Vous pouvez trouver la liste complète sur la page de triche Font Awesome.
Une fois ajouté, vous pouvez prévisualiser votre article 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 à l'aide du 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 des colonnes 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 sous l'éditeur.
Vous devrez probablement prévisualiser votre travail dans un nouvel onglet du navigateur plusieurs fois pour voir à quoi il ressemblera aux utilisateurs.
Méthode 3. Utilisation des polices d'icônes avec les générateurs 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 du 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é de saisir la clé de licence de votre plugin. Vous pouvez trouver ces informations sous votre compte sur le site Web SeedProd.
Après avoir entré votre clé de licence et cliqué sur « Vérifier la clé », vous pouvez commencer à travailler sur votre page de destination.
Accédez simplement à la page SeedProd » Landing Pages 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 superbes 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 tutoriel, nous utiliserons un modèle prédéfini. 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 de création de pages. Il s'agit d'un outil de conception par glisser-déposer dans lequel 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 depuis la colonne de gauche pour ajouter de nouveaux éléments à votre conception.
Pour le bien de ce tutoriel, nous allons ajouter le bloc Icône.
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 autre image d’icône ou modifier la couleur et le style.
Une autre façon d'utiliser les icônes dans SeedProd consiste à 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 de votre choix.
Il s'agit de l'une des façons les plus courantes d'utiliser des icônes lors de l'affichage des fonctionnalités d'un produit, de services et d'autres éléments.
Vous pouvez placer votre zone d'icônes dans les colonnes, choisir les 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 souhaitez.
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 souhaiterez peut-être également consulter notre guide des performances 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, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.