Voulez-vous ajouter des polices d'icônes à votre site WordPress? Récemment, l'un de nos lecteurs a demandé quelle est la façon la plus simple d'ajouter des polices d'icônes à votre 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 en polices Web et peuvent être conçus avec CSS.
Dans cet article, nous vous montrerons comment ajouter facilement des polices d'icônes à votre thème WordPress, étape par étape.
Que sont les polices d’icônes et pourquoi devrais-je 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 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 d'achat, des boutons de téléchargement, des boîtes de fonctionnalités, un concours de cadeaux et même dans les menus de navigation de WordPress.
Il existe plusieurs polices d'icĂ´nes gratuites et open source qui ont des centaines de belles icĂ´nes.
En fait, chaque installation WordPress est livrée avec le jeu de polices d'icônes dashicon gratuit. Ces icônes sont utilisées dans le menu d'administration WordPress et dans d'autres zones de la zone d'administration WordPress.
Certaines autres sources d'icĂ´nes populaires sont:
- Police Awesome
- Générique
- IcoMoon
- Linearicons
- Icônes de matériel Google
- Le projet de fond
Pour les besoins de 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 WPBeginner, ainsi que nos plugins WordPress comme OptinMonster, WPForms, RafflePress, etc.
Dans ce guide, nous aborderons trois façons d'ajouter des polices d'icônes dans WordPress. Vous pouvez choisir la solution qui vous convient le mieux.
Ajouter des polices d'icĂ´nes dans WordPress Ă l'aide de plugins
Si vous êtes un utilisateur de niveau débutant essayant simplement d'ajouter des icônes à vos publications 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 plugin Font Awesome 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 le support 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:
(nom de l'icône = "fusée")
Vous pouvez utiliser ce shortcode en conjonction avec un autre texte ou simplement 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 code abrégé de l'icône de police dans un bloc de paragraphe, où vous pouvez utiliser les paramètres de bloc pour augmenter la taille de l'icône.
Ă€ mesure que la taille du texte augmente, cela peut sembler Ă©trange dans l'Ă©diteur de texte. En effet, le shortcode ne se transforme pas automatiquement en police d'icĂ´ne dans l'Ă©diteur de blocs.
Vous devrez cliquer sur le bouton d'aperçu de votre publication ou page pour voir à quoi ressemblerait la taille réelle de l'icône.
Vous pouvez également utiliser le shortcode d'icône à l'intérieur des colonnes et créer des zones de fonctionnalités comme ceci:
2. Utilisation de 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 un support intégré pour les polices d'icônes. Cela vous permet d'utiliser facilement les polices d'icônes sur vos pages de destination, ainsi que dans d'autres zones de votre site Web.
Beaver Builder
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 de page WordPress personnalisées sans écrire de code.
Beaver Builder est livré avec de superbes icônes et modules prêts à l'emploi que vous pouvez faire glisser et déposer sur vos publications et pages.
Vous pouvez créer des groupes d'icônes, ajouter une seule icône et les déplacer vers des lignes et des colonnes bien positionnées. Vous pouvez également sélectionner vos propres couleurs, arrière-plan, espacement et marge sans écrire 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 est également livré avec divers é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 ont également une prise en charge complète des polices d'icônes.
3. Ajoutez des polices d'icĂ´nes dans WordPress manuellement 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, tout comme l'ajout de polices personnalisées.
Certaines polices d'icônes, comme Font Awesome, sont disponibles sur les serveurs CDN sur le Web et peuvent être liées directement à partir de votre thème WordPress.
Vous pouvez également télécharger l'intégralité du répertoire des polices dans un dossier de votre thème WordPress, puis utiliser ces polices dans votre feuille de style.
Étant donné que nous utilisons Font Awesome pour ce didacticiel, nous vous montrerons comment l'ajouter à l'aide des deux méthodes.
MĂ©thode 1:
Cette méthode manuelle est assez simple.
Tout d'abord, vous devez visiter le site Web Font Awesome et entrer votre adresse e-mail pour obtenir le code d'intégration.
Vérifiez maintenant dans votre boîte de réception un e-mail 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 balise.
Votre code d'intégration sera une seule ligne qui recherchera la bibliothèque Font Awesome directement à partir de vos serveurs CDN. Cela ressemblera à ceci:
Cette méthode est plus simple, mais peut provoquer 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 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 de l'icône 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 accéder à votre répertoire de thèmes WordPress.
Vous devez y créer un nouveau dossier et le nommer source. Ensuite, vous devez télécharger le contenu du dossier de polices d'icônes dans le répertoire de 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 à 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 correctement chargé Font Awesome dans votre thème WordPress.
Vient maintenant la partie où vous ajouterez de vraies icônes à votre thème, vos publications ou vos pages WordPress.
Affichage manuel des polices d'icĂ´nes dans WordPress
Accédez au site Web Font Awesome pour voir la liste complète des icônes disponibles. Cliquez sur n'importe quelle icône que vous souhaitez utiliser et vous verrez le nom de l'icône.
Copiez le nom de l'icĂ´ne et utilisez-le comme ceci dans WordPress.
Vous pouvez concevoir 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 concevoir en même temps. Par exemple, supposons que vous souhaitiez afficher une liste de liens avec des icônes à côté d'eux. Vous pouvez les envelopper sous un
élément avec une classe spécifique.
Home Library Applications Settings
Vous pouvez maintenant les concevoir 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 comment ajouter facilement des polices d'icônes à votre thème WordPress. Vous pouvez également consulter notre tutoriel sur l'ajout d'icônes d'image avec des menus de navigation dans WordPress.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour regarder des vidéos de didacticiel WordPress. Vous pouvez également nous trouver sur Twitter y Facebook.
