Vous souhaitez ajouter des polices d’icônes sur votre site WordPress ? Récemment, l’un de nos lecteurs a demandé quel était le moyen le plus simple d’ajouter des polices d’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. Ils sont chargés comme des polices Web et peuvent être stylisés à l’aide de CSS.
Dans cet article, nous allons vous montrer comment ajouter facilement des polices d’icônes dans 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. Par rapport aux icônes basées sur des images, les icônes de polices sont beaucoup plus rapides, ce qui contribue à la vitesse globale 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, des boutons de téléchargement, des boîtes de fonctionnalités, un concours et même dans les menus de navigation WordPress.
Il existe plusieurs polices d’icônes gratuites et open source qui contiennent des centaines de belles icônes.
En fait, chaque installation de WordPress est livrée avec le dashicons jeu de polices d’icônes. 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.
Voici d’autres polices d’icônes populaires :
Pour ce tutoriel, nous utiliserons Font Awesome. C’est la police d’icônes gratuite et open source la plus populaire disponible. Nous utilisons FontAwesome sur le site Web Themelocal ainsi que nos plugins WordPress comme OptinMonster, WPForms, TombolaPresse, etc.
Dans ce guide, nous allons couvrir trois façons d’ajouter des polices d’icônes 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 articles ou pages, cette méthode vous convient. Vous n’auriez pas à modifier les fichiers de thème et vous pourriez utiliser des polices d’icônes partout sur votre site Web.
La première chose à faire est d’installer et d’activer le Police géniale plugin pour WordPress. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, le plugin active la prise en charge de Font Awesome pour votre thème. Vous pouvez maintenant modifier n’importe quel article ou page WordPress et utiliser un shortcode d’icône comme celui-ci :
[icon name=”rocket”]
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 à quoi ressemblera l’icône sur un site en direct. Voici à quoi cela ressemblait sur notre site de test.
Vous pouvez également ajouter le shortcode de l’icône de police à l’intérieur d’un bloc de paragraphe où vous pouvez utiliser les paramètres du bloc pour augmenter la taille de l’icône.
Lorsque vous augmentez la taille du texte, cela peut sembler étrange dans l’éditeur de texte. C’est parce que le shortcode ne se transforme pas automatiquement en une police d’icône dans l’éditeur de blocs.
Vous devrez cliquer sur le bouton d’aperçu sur votre publication ou votre page pour voir à quoi ressemblerait la taille réelle de l’icône.
Vous pouvez également utiliser le shortcode de l’icône à l’intérieur des colonnes et créer des zones de fonctionnalités comme celle-ci :
2. Utilisation des polices d’icônes avec un générateur de pages 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 d’icônes. 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 pages 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 et déposer dans votre article et vos 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 CSS.
Vous pouvez même créer des thèmes WordPress entièrement personnalisés sans écrire de code à l’aide du produit Themer de Beaver Builder.
Elementor Pro
Elementor est un autre plugin de création de pages WordPress populaire. Il est également livré avec plusieurs éléments qui vous permettent d’utiliser des polices d’icônes, y compris un élément Icon.
Vous pouvez simplement faire glisser et déposer une icône n’importe où et l’utiliser avec des lignes, des colonnes et des tableaux pour créer de belles pages.
D’autres constructeurs de pages populaires comme Divi et Visual Composer prennent également entièrement 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 d’icônes ne sont que des polices et peuvent être ajoutées à votre site comme vous le feriez avec n’importe quelle police personnalisée.
Certaines polices d’icônes comme Font Awesome, sont disponibles sur les serveurs CDN sur le Web et peuvent être directement liées à partir de votre thème WordPress.
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 didacticiel, nous allons vous montrer comment vous pouvez l’ajouter en utilisant les deux méthodes.
Méthode 1 :
Cette méthode manuelle est assez simple.
Tout d’abord, vous devez visiter le Police géniale site Web et entrez votre adresse e-mail pour obtenir le code d’intégration.
Vérifiez maintenant votre boîte de réception pour un e-mail de Font Awesome avec votre code d’intégration. Copiez et collez ce code d’intégration dans le fichier header.php de votre thème WordPress juste avant le </head> étiqueter.
Votre code d’intégration sera une seule ligne qui récupérera la bibliothèque Font Awesome directement à partir de leurs serveurs CDN. Cela ressemblera à quelque chose comme ceci :
<script src="https://use.fontawesome.com/123456abc.js"></script>
Cette méthode est la plus simple, mais elle peut provoquer des conflits avec d’autres plugins.
Une meilleure approche serait de charger correctement JavaScript dans WordPress à l’aide du 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 plugin spécifique au 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 d’icônes 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.
Téléchargez simplement les polices d’icônes et décompressez le package.
Maintenant, vous devrez vous connecter à votre hébergement WordPress à l’aide d’un client FTP et vous rendre dans le répertoire de votre thème WordPress.
Vous devez y créer un nouveau dossier et le nommer 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 des polices d’icônes dans votre thème WordPress. Ajoutez simplement ce code au fichier functions.php de votre thème ou dans 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 ajouterez des icônes réelles dans votre thème WordPress, vos articles ou vos pages.
Affichage manuel des polices d’icônes dans WordPress
Allez au Le site de Font Awesome pour voir la liste complète des icônes disponibles. Cliquez sur l’icône que vous souhaitez 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.
<i class="fa-arrow-alt-circle-up"></i>
Vous pouvez styliser cette icône dans la feuille de style de votre thème comme ceci :
.fa-arrow-alt-circle-up {
font-size:50px;
color:#FF6600;
}
Vous pouvez également combiner différentes icônes et les styliser en même temps. Par exemple, disons que vous souhaitez afficher une liste de liens avec des icônes à côté d’eux. Vous pouvez les envelopper sous un élément
<div class="icons-group"> <a class="icons-group-item" href="#"><i class="fa fa-home fa-fw"></i>Home</a> <a class="icons-group-item" href="#"><i class="fa fa-book fa-fw"></i>Library</a> <a class="icons-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>Applications</a> <a class="icons-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a> </div>
Vous pouvez maintenant les styliser dans la feuille de style de votre thème comme ceci :
.icons-group-item i {
color: #333;
font-size: 50px;
}
.icons-group-item i:hover {
color: #FF6600
}
Nous espérons que cet article vous a aidé à apprendre à ajouter facilement des polices d’icônes dans votre thème WordPress. Vous pouvez également consulter notre didacticiel sur la façon d’ajouter des icônes d’image avec des menus de navigation dans WordPress.
