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? Récemment, un de nos utilisateurs nous a 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 sans ralentir votre site Web. Dans cet article, nous allons vous montrer comment ajouter facilement des polices de caractères dans votre thème WordPress.

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 redimensionnés à l'aide de CSS sans augmenter de manière significative la taille de téléchargement de votre page..

Les polices d'icônes peuvent être utilisées pour afficher les symboles couramment utilisés. Sur un site Web typique, vous pouvez les utiliser pour votre panier d'achat, les boutons de téléchargement, les zones de fonctions, les curseurs, les boutons de réseaux sociaux et même dans les menus de navigation de WordPress..

Plusieurs polices d’icônes libres et à code source libre sont disponibles avec des centaines d’icônes. En fait, chaque installation WordPress est fournie avec le jeu de polices icône Dashicons gratuit. Ces icônes sont utilisées dans la barre d'outils d'administration WordPress dans la zone d'administration..

Certaines autres polices d'icônes populaires sont:

• Police génial
• Génériques
• IcoMoon
• Linearicons

Pour les besoins de ce didacticiel, nous utiliserons FontAwesome. Il s’agit de la police d’icônes la plus populaire, gratuite et à source ouverte disponible, que nous utilisons également dans notre générateur OptinMonster..

Nous allons couvrir deux manières d’ajouter des polices d’icône dans WordPress. La première méthode utilisera un plugin, et la seconde vous montrera comment ajouter une police de caractères sans plugin..

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

FontAwesome et d'autres polices d'icônes gratuites sont prises en charge par de nombreux plugins WordPress. L'utilisation d'un plugin vous permet d'ajouter facilement une police d'icône à n'importe quel thème WordPress sans modifier le code..

La première chose à faire est d’installer et d’activer le plugin Better Font Awesome. Lors de l'activation, vous pouvez visiter Paramètres »Better Font Awesome page pour configurer les paramètres du plugin. Cependant, le plugin fonctionne immédiatement, de sorte que la plupart des utilisateurs n'ont pas besoin de changer quoi que ce soit..

Better Font Awesome vous permet d'ajouter des icônes de police à l'aide de codes abrégés comme ceci:

[icon name = "rocket"]
[icon name = "cloud"]
[nom de l'icône = "casque"]

Vous pouvez également ajouter les icônes dans Post Editor en sélectionnant simplement une icône. Allez-y, créez un nouveau post ou modifiez un post existant, et vous verrez le Bouton Insérer une icône.

En cliquant dessus, une fenêtre contextuelle apparaîtra où vous pourrez localiser une icône et l'insérer..

Vous remarquerez que le plugin ajoutera un shortcode dans votre éditeur de publication qui ressemblera à ceci:

[icon name = "university"]

Si vous souhaitez personnaliser davantage l'icône, vous pouvez ajouter votre propre classe CSS pour ajouter des styles personnalisés..

[icon name = "university"]

Maintenant, vous pouvez styliser l'icône en utilisant CSS dans la feuille de style de votre thème ou de votre thème enfant..

 .fa-universityicon font-size: 100px; couleur: # FF6600;  

C'est si simple.

Voyons maintenant comment ajouter des polices de caractères dans WordPress sans plugin..

Ajout manuel de polices d'icônes dans WordPress

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 directement liées à 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 tutoriel, nous allons vous montrer comment vous pouvez l'ajouter en utilisant les deux méthodes..

Méthode 1:

C'est le plus facile. Tout ce que vous avez à faire est d’ajouter cette seule ligne de code dans le thème de votre thème. header.php déposer juste avant le étiquette.

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

Une meilleure approche pour charger des feuilles de style ou des scripts dans WordPress consiste à les mettre correctement en file d'attente..

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_style ('wpb-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');  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’avoir les polices dans votre thème..

Il suffit de télécharger les polices d'icône et de décompresser le package. Maintenant, vous devrez vous connecter à votre site Web à l'aide d'un client FTP et accéder au 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..

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 réelles dans votre thème, les messages ou les pages WordPress.

Afficher manuellement les polices d'icônes dans WordPress

Rendez-vous sur le site Web de Font Awesome pour voir la liste complète des icônes disponibles. Cliquez sur l'icône que vous souhaitez utiliser pour voir le nom de l'icône..

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

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

 .fa-optin-monster taille de la police: 50px; couleur: # 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 élément avec une classe spécifique.

  Accueil Bibliothèque Applications Réglages  

Maintenant, vous pouvez les styler dans la feuille de style de votre thème comme ceci:

 .icons-group-item i color: # 333; taille de la police: 50px;  .icons-group-item i: survol color: # FF6600 

Nous espérons que cet article vous a aidé à apprendre à ajouter facilement des polices d’icône dans votre thème WordPress. Vous pouvez également consulter notre didacticiel sur la procédure d’ajout d’icônes d’image avec des menus de navigation dans WordPress..

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.