skip to Main Content

Comment intégrer des fontes d’icônes à 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é ]

Les fontes d’icônes ou polices d’icônes vous aident à donner des indications visuelles à vos visiteurs. Techniquement ce sont de petites images intégrées en tant que caractères dans des fichiers de polices de caractères.

Plus jolies que les bitmaps et pleinement responsive, elles peuvent être décorées et manipulées avec du CSS à la même façon que les polices de caractères. A cet égard, elles sont très faciles d’intégration dans la plupart des sites internet, ceux conçus sous WordPress ne faisant aucune exception.

Dans cet article, vous ferez usage d’un plugin pour ajouter des icônes en tant que fonctionnalités directement dans votre éditeur WYSIWYG, et enfin pour les plus manuels, nous survolerons les étapes pour inclure vos fontes d’icônes favorites dans votre thème.

Ajouter des fontes d’icônes dans votre éditeur WYSIWYG

Le moyen le plus simple pour intégrer des fontes d’icônes sur votre site est d’installer et activer le plugin WP Visual Icon Fonts Ensuite visitez Réglages >> Icon Fonts. Là, vous aurez à choisir entre FontAwesome 4 (super pack de 369 icônes) et Genericons (69 icônes) qui sont les deux fontes installées par défaut dans le plugin. Pour finir, enregistrez vos modifications.

A présent dans votre éditeur, juste à la suite du bouton Média que vous connaissez déjà très bien, vous pouvez voir un bouton libellé Icon. Cliquer sur ce dernier déroulera une liste contenant toutes les icônes contenues dans la police d’icônes que vous avez sélectionné plus tôt. Le filtre de recherche vous permet de trouver l’icône de votre choix plus rapidement, au lieu de parcourir toute la liste.

Notez que vous avez fait plus qu’ajouter un bouton dans votre éditeur. Vous venez de rendre disponible une police d’icônes dans toute l’étendue de votre installation WordPress. Cela signifie que vous pouvez introduire des icônes partout où vous avez le droit d’écrire du HTML. Et vous pouvez les décorer avec du CSS exactement comme vous le feriez avec des polices de caractères. Mais ça, vous le saviez déjà.

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 ]

Ajouter des fontes d’icônes manuellement

Pour une raison ou pour une autre, vous pourriez ne pas vouloir ou pouvoir installer de plugins, et par conséquent, avoir à intégrer vos fontes manuellement. Mais avant de vous salir les mains soyez avertis du danger que représente l’édition des fichiers de thèmes.

Il est fortement recommandé de ne PAS modifier le fichier functions.php ou tout autre fichier de votre thème car une mise à jour du thème effacerait vos modifications ou pourrait casser votre site. A la place, créez un thème enfant ou écrivez un plugin spécifique à votre site.

La procédure à suivre est presque la même pour toutes les polices d’icônes. Alors sentez-vous libre d’utiliser votre fonte préférée.

Téléchargez l’archive zip de la fonte d’icône de votre choix sur le site du développeur et uploadez son contenu dans un répertoire de votre site. Vous pourriez par exemple créer un répertoire du nom de votre fonte, par exemple ma-fonte-favorite, sous le dossier css de votre thème.

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]

Maintenant, il faut enregistrer votre fonte d’icônes auprès de WordPress. Pour cela, ajoutez ceci à la fin du fichier functions.php de votre thème.

//enregistrer la feuille de styles de votre fonte auprès de wordpress après upload
wp_enqueue_style('ma-fonte-favorite' ,get_stylesheet_directory_uri() . '/css/ma-fonte-favorite.css');
}
add_action('wp_enqueue_scripts', 'enqueue_icon_fonts_stylesheets');

 Veillez à remplacer ma-fonte-favorite par le nom de la fonte d’icônes de votre choix. Dans le bloc de code ci-dessus, vous déclarez la fonction enqueue_icon_fonts_stylesheets qui fait usage de la fonction spéciale wp_enqueue_style pour enregistrer le fichier de style de votre fonte auprès de WordPress. Pour finir, à l’aide de la fonction spéciale add_action, vous accrochez votre fonction (pour exécution future) à l’évenement wp_enqueue_scripts pour que le fichier .css de la fonte soit ajouté en entête de page.

Notez que si vous ne voulez pas uploader des fichiers dans votre site, vous pouvez rechercher si la fonte d’icônes de votre choix est hébergée sur un CDN. Si c’est le cas, votre fonction enqueue_icon_fonts_stylesheets devrait alors ressembler à ça :


//example avec Fontawesome
//enregistrer la fonte auprès de wordpress via CDN
function enqueue_icon_fonts_stylesheets(){
wp_enqueue_style('font-awesome , '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
}
add_action('wp_enqueue_scripts', enqueue_icon_fonts_stylesheets ');

A partir de ce moment vous pouvez utiliser votre fonte comme d’habitude, ou vous pouvez lire la documentation sur le site du développeur.

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é]

Avec cette méthode, vous pouvez ajouter plusieurs fontes d’icônes à la fois, ce qui peut d’un autre côté alourdir le chargement de vos pages. Pour remédier à ce problème vous pouvez utiliser la puissance de services tels que Fontello, Icomoon ou encore Flaticon qui vous permettent de sélectionner individuellement des icônes dans différentes fontes existantes et les compilées en une seule fonte que vous pourrez intégrer par la suite dans votre site. Ainsi vous pourrez avoir le meilleur de plusieurs fontes en une seule.

Maintenant que vous avez installé des fontes d’icônes sur votre site, vous pourriez en ajouter au menu de votre site.

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
2 Partages
Partagez2
Tweetez
Enregistrer