Comment utiliser les polices d'icônes dans l'éditeur de publication WordPress (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 mises à l'échelle à n'importe quelle taille et stylisées comme n'importe quelle autre police de texte.

Dans cet article, nous vous montrerons comment utiliser facilement des polices d'icônes dans l'éditeur de publication WordPress sans écrire de code HTML.

Nous vous montrerons plusieurs méthodes, chacune utilisant une approche légèrement différente de l'autre. Vous pouvez choisir celle qui vous convient le mieux.

Méthode 1. Ajout de polices d'icônes dans l'éditeur de publication WordPress à l'aide de JVM Rich Text Icons

Cette méthode est recommandée pour une utilisation sur tout type de site Web WordPress. Elle est facile à utiliser et fonctionne parfaitement 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 comment installer un plugin WordPress.

Une fois activé, vous pouvez simplement modifier un article ou une page WordPress ou en créer un nouveau. Dans l'éditeur d'article, ajoutez un nouveau bloc de paragraphe, et vous verrez une nouvelle icône de drapeau dans la barre d'outils du bloc.

Cliquer dessus affichera une fenêtre contextuelle d'icônes parmi lesquelles choisir. Par défaut, il utilise les polices d'icônes populaires Font Awesome.

Vous pouvez utiliser la recherche pour trouver une icône ou simplement faire défiler vers le bas pour trouver l'icône que vous souhaitez, puis cliquer pour l'ajouter.

Un avantage de l'utilisation des polices d'icônes est que vous pouvez utiliser du 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, et plus encore.

Voici un exemple d'utilisation de polices d'icônes et d'options de blocs pour styliser trois colonnes.

Un autre exemple utile d'utilisation de polices d'icônes est avec les boutons.

Cette fois, nous utilisons des polices d'icônes en ligne à côté de 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, et plus encore pour tirer le meilleur parti des polices d'icônes.

Méthode 2. Ajouter des polices d'icônes dans l'éditeur d'articles WordPress avec Font Awesome

Cette méthode nécessite d'ajouter des shortcodes dans l'éditeur d'articles 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 comment installer un plugin WordPress.

Après l'activation, vous pouvez modifier un article ou une page dans WordPress et utiliser le shortcode suivant pour ajouter une icône de police.

[icon name="home"]

Le paramètre name est ici le nom de la police utilisée par Font Awesome. Vous pouvez trouver la liste complète sur la page Feuille 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 comme une icône dans l'éditeur de blocs.

Voici à quoi cela ressemblait sur notre site de test.

Vous pouvez utiliser le shortcode à l'intérieur d'un paragraphe et en ligne avec d'autres textes. 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 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 l'ont pas dans l'éditeur.

Vous devrez probablement prévisualiser votre travail dans un nouvel onglet de navigateur plusieurs fois pour voir à quoi cela ressemblera pour les utilisateurs.

Méthode 3. Utilisation des 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 du marché. Il vous permet de créer facilement des pages de destination époustouflantes ou de concevoir un thème de 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 comment installer un plugin WordPress.

Après l'activation, il vous sera demandé d'entrer votre clé de licence de plugin. Vous pouvez trouver ces informations dans votre compte sur le site Web de 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.

Allez simplement à la page SeedProd » Pages de destination 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 ensemble de magnifiques designs de pages de destination que vous pouvez utiliser comme point de départ, ou vous pouvez commencer avec un modèle vierge et concevoir l'ensemble 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 lancera alors l'interface du constructeur de pages. 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 Icône.

Une fois le bloc ajouté, 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 modifier la couleur et le style.

Une autre façon d'utiliser les icônes dans SeedProd est d'ajouter le bloc « Boîte à icônes ».

La différence entre celui-ci et le bloc « Icône » que nous avons utilisé précédemment est que « Boîte à icônes » vous permet d'ajouter du texte avec votre icône choisie.

C'est l'une des façons les plus courantes d'utiliser les icônes lors de l'affichage des fonctionnalités des produits, des services et d'autres éléments.

Vous pouvez placer votre boîte à icônes à l'intérieur de 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 comme modèle » afin de pouvoir réutiliser cette conception avec SeedProd sur d'autres parties de votre site Web.

Voici comment les polices d'icônes apparaissaient sur notre site Web de test.

Nous espérons que cet article vous a aidé à apprendre comment utiliser les polices d'icônes dans l'éditeur de publication WordPress sans écrire de code HTML. Vous voudrez peut-être aussi 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 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.