[AUTOMATIQUE] Cet article a plus de 5 ans.
Il se peut donc que les informations qu'il fournit ne soient plus totalement exactes.

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 :

function bweb_load_dashicons() {
    wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'bweb_load_dashicons' );

 

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 :

add_action( 'wp_enqueue_scripts', 'bweb_dashicons_dependency' );
function themename_scripts() {
    wp_enqueue_style( 'dependency-style', get_stylesheet_uri(), array( 'dashicons' ), '1.0' );
}

 

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 :

<span class="dashicons dashicons-yes"></span>

 

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

.myicon:before {
	content: "\f155";
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 20px/1 'dashicons';
	vertical-align: top;
}

 

Voilà, vous savez maintenant comment faire !

 

Article rédigé parBrice CAPOBIANCO

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager !

Coorganisateur des Meetups WordPress Rennes et fondateur de bweb.
Partager cet article

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