WordPress 3.8 s'est dotée d'une nouvelle interface d'administration avec l'utilisation d'une police d'icônes afin de remplacer les images et donc gagner en performances. Pourquoi ne pas l'utiliser pour les icônes de nos types de contenu ou directement dans votre thème comme je le fais sur WordPress Channel ?

2 méthodes existent pour utiliser les dashicons de WordPress : en utilisant du CSS avec le pseudo élément :before ou :after ou directement en HTML. Une excellente ressource recense les différents icônes inclues dans la police et fournit les codes à utiliser.

Attention, ce tutoriel est réservé à des utilisateurs avertis.

#1 – Pour vos thèmes et plugins

À la différence du back-office, la police dashicons n’est pas intégrée dans le front-office ce qui est tout à fait logique. Pour l’utiliser, il suffit donc de la charger comme n’importe quelle feuille de styles. Il convient d’adapter ces lignes de code avec votre thème pour éviter de doubler le wp_enqueue_scripts.

Le plus souvent, il convient d’éditer le fichier functions.php mais pas forcément si le thème repose sur un framework. Dans ce cas, il vous faudra creuser un peu.

function wpc_dashicons() {
wp_enqueue_style('dashicons');
}

add_action('wp_enqueue_scripts', 'wpc_dashicons');

Ensuite, à l’aide des outils de développement de votre navigateur – Firebug sous Mozilla Firefox par exemple, repérez les classes ou les ID à modifier dans la feuille de styles CSS. Rajoutez :before pour placer du contenu avant ou :after pour le placer après.

Voici un exemple en place pour l’icône symbolisant un utilisateur sur la page d’accueil dans les métas d’un billet :

span.author:before {
    content: "\f110";
    font-family: dashicons;
}

Le principe n’est guère très compliqué : obtenez le code CSS via le site ressource puis ajoutez dashicons comme font-family.

Faites de même pour les autres éléments. Évidemment, vous pouvez spécifier des propriétés supplémentaires comme une taille, une couleur ou autre. C’est tout l’avantage d’utiliser des polices personnalisées !

#2 – Dans les custom post types

Dans un précédent tutoriel qui commence à dater mais qui reste valable pour les versions de WordPress antérieures à la 3.8, je vous indiquais comment ajouter des icônes pour vos types de contenu personnalisé. Idéal pour donner un aspect professionnel à votre back-office !

Depuis la 3.8, le recours à des icônes de couleurs casse l’harmonie visuelle à mon sens. Si vous trouvez votre bonheur dans la police dashicons alors utilisez-là en modifiant le code qui génère le type de contenu comme le montre cet exemple :

function cpt_ntp_slider() {
    $labels = array(
        'name'                => _x( 'Diapositives', 'Post Type General Name', 'ntp_framework' ),
        'singular_name'       => _x( 'Diapositive', 'Post Type Singular Name', 'ntp_framework' ),
        'menu_name'           => __( 'Diapositives', 'ntp_framework' ),
        'parent_item_colon'   => __( 'Diapositive parente :', 'ntp_framework' ),
        'all_items'           => __( 'Toutes les diapositives', 'ntp_framework' ),
        'view_item'           => __( 'Voir la diapositive', 'ntp_framework' ),
        'add_new_item'        => __( 'Ajouter une diapositive', 'ntp_framework' ),
        'add_new'             => __( 'Nouvelle diapositive', 'ntp_framework' ),
        'edit_item'           => __( 'Editer une diapositive', 'ntp_framework' ),
        'update_item'         => __( 'Mettre à jour', 'ntp_framework' ),
        'search_items'        => __( 'Rechercher des diapositives', 'ntp_framework' ),
        'not_found'           => __( 'Aucune diapositive trouvé', 'ntp_framework' ),
        'not_found_in_trash'  => __( 'Aucune diapositive dans la corbeille', 'ntp_framework' ),
    );

    $args = array(
        'label'               => __( 'diapositive', 'ntp_framework' ),
        'description'         => __( 'Les diapositives du site.', 'ntp_framework' ),
        'labels'              => $labels,
        'supports'            => array( 'title', 'editor', 'revisions', 'custom-fields', 'thumbnail'),
        'hierarchical'        => false,
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'show_in_nav_menus'   => false,
        'show_in_admin_bar'   => true,
        'menu_position'       => 20,
        'menu_icon'           => 'dashicons-images-alt',
        'can_export'          => true,
        'has_archive'         => false,
        'exclude_from_search' => true,
        'publicly_queryable'  => true,
        'rewrite'             => false,
        'capability_type'     => 'page',
    );

    register_post_type( 'diaporama', $args );
}

add_action( 'init', 'cpt_ntp_slider', 0 );

Notez la présence du paramètre menu_icon.

Le principe est fort simple : indiquez simplement la valeur correspond à la classe CSS obtenue en cliquant sur HTML à partir du lien ressource. Si vous cliquez sur l’icône WordPress dans la liste et que vous faites Copy HTML alors vous obtenez ce code.

Capture d'écran - Code HTML dashicons
Copie de l’icône WordPress via la police dashicons

Il vous suffit de copier / coller dashicons-wordpress-alt comme valeur de menu_icon.

Sauvegardez le fichier puis retourner dans le back-office pour admirer le résultat : vos icônes prennent la même apparence que les autres éléments du menu.

Exemple d'utilisation des dashicons sous WordPress
Exemple d’utilisation des dashicons sous WordPress

Le recours à une police comme dashicons est un bon moyen d’éviter le chargement d’images supplémentaires et de s’intégrer au plus près de l’interface de WordPress.

10 commentaires
  1. Génial ! Merci pour l’astuce ! Mais dis moi, si on utilise ces icônes dans un thème qui lui même est utilisé dans une version de WordPress inférieur à 3.8, que se passe-t-il ?

    1. Aurélien Denis auteur de l’article

      Pour une version inférieure à 3.8, cela ne fonctionnera pas car les dashicons ne seront pas intégré dans WordPress. On pourra toutefois faire un wp_register_style pour intégrer la CSS.

      1. Oui mais du coup qu’est ce qui s’affiche ? Quelque chose par défaut ou rien du tout ?

  2. Bernard G.

    Bonjour,
    Cela aurait sympa de visualiser le résultat de ce code. Merci.

    1. Aurélien Denis auteur de l’article

      Très bonne remarque ! J’ai ajouté une capture d’écran.

  3. jean-claude Martin

    Bonjour,
    Pour ma part j’utilise un autre thème mais avec le même principe d’icônes.Mon souci est que je n’arrive pas a ajouter une icône devant le titre d’un nouveau widget.
    Exemple,à l’aide de la boite texte je crée un widget biographie,j’ai bien mon titre mais pas d’icône?
    Avez-vous une piste ou la solution?
    merci

    1. Aurélien Denis auteur de l’article

      En CSS ça doit fonctionner ou bien directement en collant le code HTML dans le titre du widget (pas certain pour cette seconde technique).

    1. Aurélien Denis auteur de l’article

      C’est cool, merci de l’info ! Petite faute dans la description sur WordPress.org et il manque des screenshots.

      1. Julien Maury

        Oui merci corrigé. J’ai fait les screenshots en + mais j’ai oublié de les mettre dans le readme.txt oO

Les commentaires sont fermés.