Vous ne le savez peut-être pas, mais WordPress intègre depuis un moment déjà une bibliothèque d’icônes sous forme de font-face. Elle est notamment utilisée dans les menus de l’administration. Maintenant que je vous dis ça, vous allez vous dire que c’est évident…

Et bien je vais vous expliquer très rapidement comment les utiliser pour intégrer en 2 minutes dans tous vos projet WordPress, que ce soit dans vos plugins, vos thèmes et aussi bien en front qu’en back-office (en « arrière guichet » comme le demande le Journal officiel)

Voici donc la liste des icônes disponibles : Developer Resources – Dashicons

 

1.Charger la bibliothèque

La bibliothèque étant enregistrée sous le nom « dashicons », il ne nous reste plus qu’à l’appeler pour l’utiliser :

 

Si la bibliothèque nécessite un autre script tel qu’une feuille de style pour être appelée (dépendance), alors il nous suffit de le préciser :

 

2.Utiliser les icônes, le CSS

Maintenant que la font est chargée, il ne vous reste plus qu’à utiliser le style approprié.

Par exemple, pour afficher une icône sans lui apporter de style particulier, il suffit d’utiliser la class correspondante :

 

En revanche si vous voulez customiser un peu plus les icônes (couleur, taille, etc.), il est plus judicieux de les appeler comme suit :

 

Voilà, vous savez maintenant comment faire !

 

Brice Capobianco

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager…
Responsable commercial en agence web, je suis également développeur freelance WordPress à Rennes.

Coorganisateur des Meetups WordPress Rennes et fondateur de b-website.com.