skip to Main Content

Comment ajouter facilement des polices-icônes sur votre thème WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Souhaitez-vous ajouter des polices-icônes sur votre blog WordPress ? En cette période de fêtes, tout le monde souhaite personnaliser  d’avantage son blog pour offrir une meilleure image de ce dernier. Les polices-icônes font partie des aménagements qui sont régulièrement prises.

Dans ce tutoriel, je vous montrerai comment ajouter des polices-icônes sur votre blog WordPress.

iconfontswp-1

Petite précision sur les polices-icônes

Les polices-icônes contiennent des symboles ou des pictogrammes au lieu des lettres et des nombres. Ces pictogrammes peuvent être facilement redimensionnés via un code CSS sans que cela n’affecte considérablement la taille de vos pages.

icomoon

Les polices icônes peuvent être utilisées pour afficher des symboles assez communs. Sur un site web classique, vous pouvez les utiliser pour afficher l’icône du panier, des boutons de téléchargement, des sliders, sur les boutons des médias sociaux et même dans les menus de navigation WordPress.

Il existe plusieurs polices-icônes disponibles avec des options différentes. En fait, chaque installation WordPress utilise Dashiconsqui est un ensemble de jeu de polices. Ces icônes sont utilisées sur la barre d’utilisateur du tableau de bord.

Voici quelques projets de polices-icônes :

Pour ce tutoriel, j’utiliserai Font Awesome, qui est par ailleurs l’une des polices-icônes les plus utilisée et gratuite.

Nous allons explorer l’ajout des polices icônes sur votre thème WordPress. La première méthode se fait en utilisant un plugin et nous vous montrerons également comme le faire sans plugin.

Comment ajouter les polices icônes avec un plugin WordPress

FontAwesome est pris en charge par plusieurs plugins. L’utilisation d’un plugin vous permet de facilement ajouter une icône-police sur votre thème sans modifier le code source.

La première chose que vous avez à faire c’est d’installer et d’activer le plugin Better Font Awesome, disponible sur WordPress.org. Après l’activation du plugin, vous devez accéder à l’emplacement suivant : « Réglages > Better Font Awesome« , pour configurer le plugin. Cependant, ce plugin peut fonctionner sans configuration, alors les utilisateurs n’ont pas réellement besoin de changer quoi que ce soit.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

betterfontawesome

Ce plugin vous permet d’ajouter les polices-icônes comme suit :

[icon name= »rocket »]

[icon name= »cloud »]

[icon name= »headphones »]

Vous pouvez ajouter les icônes sur l’interface d’édition des articles en choisissant parmi les icônes disponibles. Il vous suffit de créer un nouvel article et vous remarquerez l’icône « Insert Icon Button » sur la barre d’outils de l’éditeur visuel.

Cliquez dessus fera apparaître une nouvelle fenêtre où vous pourrez localiser une icône et l’insérer.

fa-posteditor

Vous remarquerez que le plugin ajoutera un bouton similaire à celui-ci :

[icon name= »university » class= » » unprefixed_class= » »]

Si vous souhaitez ajouter plus d’options de personnalisation, vous pouvez ajouter votre propre classe pour un style personnalisé.

[icon name= »university » class= »maclasse » unprefixed_class= » »]. Voici comment vous personnaliserez la classe de votre icône :

.fa-maclasse{ 
font-size:100px;
color:#FF6600;
} 

C’est vraiment simple. Vous remarquez que la classe est précédée de « fa-« . N’oubliez pas de l’ajouter dans le code CSS.

Comment ajouter une police icône sur WordPress manuellement

Comme il a été mentionné plus tôt dans ce tutoriel, je vous montrerai comment ajouter une police icône sur votre blog manuellement.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Certaines polices icônes comme Font Awesome, sont disponibles via des serveurs CDN à travers le monde et peuvent être liées à votre blog directement.

Vous pouvez également envoyer les fichiers de cette police-icône directement dans le dossier de votre thème WordPress. Je vous montrerai comment ajouter l’icone-police Font Awesome sur votre blog.

Première méthode : 

C’est la méthode la plus simple. Il vous suffit d’ajouter cette ligne dans la section « <head> » de votre thème (généralement c’est dans le fichier header.php).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

Cette méthode est simple, mais elle peut causer beaucoup de conflit avec d’autres plugins. La meilleur approche est de charger les scripts depuis WordPress de manière à les ajouter à la file d’attente.

function wp_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', 'wp_load_fa' );

Deuxième méthode : 

La deuxième méthode n’est pas la plus simple, mais elle vous permet d’avoir des polices icône sur votre thème. Il vous suffit tout simplement de télécharger et de décompresser votre package de police-icône (fichier compressé)  dans le dossier « fonts » de votre thème.

Il vous suffit de télécharger ensuite l’icône-police et renommé le. Ce que vous avez besoin de faire ensuite c’est de charger la police icône depuis votre serveur.

ftpupload

Maintenant que vous êtes prêt à charger les icônes-polices sur votre theme WordPress, il vous suffit tout simplement d’ajouter le code suivant dans le fichier « functions.php » de votre thème WordPress ou dans votre plugin WordPress.

function wp_load_fa() {

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

}

add_action( 'wp_enqueue_scripts', 'wp_load_fa' );

C’est tout ce qu’il y à faire.

Comment afficher manuellement les icônes polices sur votre blog

Accédez au blog de Font Awesome et consultez la liste de polices disponibles. Cliquez sur n’importe qu’elle image, et vous verrez le code de ce dernier.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

fa-optinmonster

Il vous suffit et copier et de coller le code suivant :

<i class="fa-optin-monster"></i>

En mode éditeur de texte. Vous pourrez vous servir de la classe pour apporter une modification à l’icône-police.

Si vous avez besoin d’en savoir plus sur le CSS, je vous invite à lire ce tutoriel. C’est tout pour ce tutoriel. N’hésitez pas à le partager avec vos amis sur vos réseaux sociaux préférés.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
4 Partages
Partagez2
Tweetez
Enregistrer2