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

Voulez-vous ajouter des polices d'icônes sur votre site WordPress? Un de nos lecteurs a récemment demandé quel était le moyen le plus simple d’ajouter des polices-icônes dans leur thème WordPress.

Les polices d'icônes vous permettent d'ajouter des icônes vectorielles (redimensionnables) sans ralentir votre site Web. Elles sont chargées comme des polices Web et peuvent être stylées à l'aide de CSS.

Dans cet article, nous allons vous montrer comment ajouter facilement des polices d'icônes à votre thème WordPress, étape par étape.

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

Les polices d'icônes contiennent des symboles ou des pictogrammes au lieu de lettres et de chiffres. Ces pictogrammes peuvent être facilement ajoutés au contenu du site Web et redimensionnés à l'aide de CSS. Comparées aux icônes basées sur des images, les icônes de polices sont beaucoup plus rapides, ce qui contribue à la vitesse de votre site Web WordPress.

Les polices d'icônes peuvent être utilisées pour afficher les icônes couramment utilisées. Par exemple, vous pouvez les utiliser avec votre panier, vos boutons de téléchargement, vos champs de fonctions, votre concours, et même dans les menus de navigation WordPress.

Il existe plusieurs polices d’icônes gratuites et à code source ouvert contenant des centaines de belles icônes.

En fait, chaque installation WordPress est livrée avec le jeu de polices icône Dashicons gratuit. Ces icônes sont utilisées dans le menu d’administration de WordPress et dans d’autres zones de la zone d’administration de WordPress.

Certaines autres polices d'icônes populaires sont:

• Police géniale
• Génériques
• IcoMoon
• Linearicons
• Icônes matérielles de Google
• Le projet de nom

Pour les besoins de ce didacticiel, nous utiliserons Font Awesome. Il s'agit de la police d'icônes la plus populaire, disponible gratuitement et à code source ouvert. Nous utilisons FontAwesome sur le site Web themestotal ainsi que nos plugins WordPress tels que OptinMonster, WPForms, RafflePress, etc.

Dans ce guide, nous allons couvrir trois manières d’ajouter des polices de caractères dans WordPress. Vous pouvez choisir la solution qui vous convient le mieux.

Ajout de polices d'icônes dans WordPress à l'aide de plugins

Si vous êtes un utilisateur de niveau débutant et que vous essayez simplement d'ajouter des icônes à vos publications ou à vos pages, cette méthode vous convient. Vous n’auriez pas besoin de modifier les fichiers de thème ni d’utiliser des polices de caractères partout sur votre site Web.

La première chose à faire est d’installer et d’activer le plugin Font Awesome pour WordPress. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’un plugin WordPress.

Lors de l'activation, le plugin active le support de Font Awesome pour votre thème. Vous pouvez maintenant éditer n'importe quel post ou page WordPress et utiliser un shortcode d'icône comme ceci:

(nom de l'icône = "fusée")

Vous pouvez utiliser ce shortcode avec un autre texte ou seul dans un bloc de shortcode dédié.

Une fois ajouté, vous pouvez prévisualiser votre publication ou votre page pour voir l’apparence de l’icône sur un site actif. Voici à quoi cela ressemblait sur notre site de test.

Vous pouvez également ajouter le shortcode d'icône de police à l'intérieur d'un bloc de paragraphe, à partir duquel vous pouvez utiliser les paramètres de bloc pour augmenter la taille de l'icône.

Lorsque vous augmentez la taille du texte, cela peut paraître étrange dans l'éditeur de texte. C’est parce que le code court ne se change pas automatiquement en une police d’icône dans l’éditeur de blocs.

Vous devrez cliquer sur le bouton d'aperçu de votre message ou de votre page pour voir à quoi ressemblerait la taille réelle de l'icône.

Vous pouvez également utiliser l'icône shortcode à l'intérieur des colonnes et créer des zones de fonctions comme ceci:

2. Utilisation des polices d'icônes avec un générateur de page WordPress

Les plugins de création de pages WordPress les plus populaires sont livrés avec une prise en charge intégrée des polices de caractères. Cela vous permet d'utiliser facilement les polices d'icônes dans vos pages de destination, ainsi que dans d'autres zones de votre site Web.

Bâtisseur de castor

Beaver Builder est le meilleur plugin de création de page WordPress sur le marché. Il vous permet de créer facilement des mises en page personnalisées dans WordPress sans écrire de code.

Beaver Builder est livré avec de belles icônes et des modules prêts à l'emploi que vous pouvez simplement faire glisser dans vos publications et pages.

Vous pouvez créer des groupes d'icônes, ajouter une seule icône et les déplacer dans des lignes et des colonnes bien positionnées. Vous pouvez également sélectionner vos propres couleurs, arrière-plan, espacement et marge sans écrire de code CSS.

Vous pouvez même créer des thèmes WordPress entièrement personnalisés sans écrire de code avec le produit Themer de Beaver Builder.

Elementor Pro

Elementor est un autre plugin de création de page WordPress populaire. Il comporte également plusieurs éléments vous permettant d’utiliser des polices d’icône, notamment un élément Icône.

Vous pouvez simplement faire glisser une icône n'importe où et l'utiliser avec des rangées, des colonnes et des tableaux pour créer de belles pages.

D'autres créateurs de pages populaires tels que Divi et Visual Composer prennent également en charge les polices d'icônes.

3. Ajout manuel de polices d'icônes dans WordPress avec du code

Comme nous l'avons mentionné précédemment, les polices à icônes ne sont que des polices et peuvent être ajoutées à votre site comme vous le feriez pour ajouter des polices personnalisées.

Certaines polices d'icônes, telles que Font Awesome, sont disponibles sur les serveurs CDN du Web et peuvent être liées à partir de votre thème WordPress directement.

Vous pouvez également télécharger l'intégralité du répertoire de polices dans un dossier de votre thème WordPress, puis utiliser ces polices dans votre feuille de style.

Puisque nous utilisons Font Awesome pour ce tutoriel, nous allons vous montrer comment vous pouvez l'ajouter en utilisant les deux méthodes.

Méthode 1:

Cette méthode manuelle est assez facile.

Tout d’abord, vous devez visiter le site Web Font Awesome et entrer votre adresse électronique pour obtenir le code intégré.

Maintenant, vérifiez votre boîte de réception pour un email de Font Awesome avec votre code d'intégration. Copiez et collez ce code intégré dans le fichier header.php de votre thème WordPress juste avant la étiquette.

Votre code intégré sera une seule ligne qui récupérera la bibliothèque Font Awesome directement à partir de leurs serveurs CDN. Cela ressemblera à ceci:

Cette méthode est la plus simple, mais elle peut causer des conflits avec d’autres plugins.

Une meilleure approche serait de charger correctement JavaScript dans WordPress en utilisant le mécanisme de mise en file d'attente intégré.

Au lieu de créer un lien vers la feuille de style à partir du modèle d’en-tête de votre thème, vous pouvez ajouter le code suivant dans le fichier functions.php de votre thème ou dans un plug-in spécifique à un site.

function wpb_load_fa() {

wp_enqueue_script( 'wpb-fa', 'https://use.fontawesome.com/123456abc.js', array(), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

Méthode 2:

La deuxième méthode n’est pas la plus simple, mais elle vous permettrait d’héberger les polices Font Awesome sur votre propre site Web.

Tout d’abord, vous devez visiter le site Web Font Awesome pour télécharger le package de polices sur votre ordinateur.

Il suffit de télécharger les polices de l'icône et de décompresser le package.

Maintenant, vous devrez vous connecter à votre hébergement WordPress en utilisant un client FTP et aller dans le répertoire de votre thème WordPress.

Vous devez créer un nouveau dossier et nommer les polices. Ensuite, vous devez télécharger le contenu du dossier des polices d'icônes dans le répertoire des polices de votre serveur d'hébergement Web.

Vous êtes maintenant prêt à charger les polices d'icônes dans votre thème WordPress. Ajoutez simplement ce code au fichier functions.php de votre thème ou à un plugin spécifique au site.

function wpb_load_fa() {

wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );

}

add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

Vous avez chargé avec succès Font Awesome dans votre thème WordPress.

Vient maintenant la partie où vous allez ajouter des icônes dans votre thème, vos posts ou vos pages WordPress.

Afficher manuellement les polices d'icônes dans WordPress

Accédez au site Web de Font Awesome pour voir la liste complète des icônes disponibles. Cliquez sur n'importe quelle icône que vous voulez utiliser, et vous pourrez voir le nom de l'icône.

Copiez le nom de l'icône et utilisez-le comme ceci dans WordPress.

Vous pouvez styliser cette icône dans la feuille de style de votre thème de la manière suivante:

.fa-arrow-alt-circle-up { 
font-size:50px; 
color:#FF6600; 
}

Vous pouvez également combiner différentes icônes et les styler en une fois. Par exemple, supposons que vous souhaitiez afficher une liste de liens avec des icônes à leur côté. Vous pouvez les envelopper sous un

  Home
  Library
  Applications
  Settings

.icons-group-item i { 
color: #333; 
font-size: 50px; 
} 
.icons-group-item i:hover { 
color: #FF6600
}