Replace WordPress Admin Menu Icons

Replace WordPress Admin Menu Icons

One of my favorite things about the new admin theme that shipped with WordPress 3.8 is the new Dashicons icon font. It brings a sense of standard and uniformity to dashboard icons with its distinctive look and vast array of icons for theme and plugin authors to choose from and use with ease.

However, it seems that not all plugin and theme authors have jumped on the Dashicons bandwagon. They insist on using their own custom image icons that do not fit in with the new design at all. This includes things such as colored icons which do not adapt to the different color schemes included with WordPress. Other authors do not set an icon for their menu or post type, resulting in many of that same thumb tack post icon or generic gear icon. This leads to a messy dashboard, which I do not like.

Fortunately, it is easier than ever to override the author’s choice of icon with a Dashicon of your choice – all with only a few lines of CSS.

First if all, head over to the Dashicons website and pick out an icon you want. Select it and click “Copy CSS” to copy the necessary code for using that icon in CSS.

The next step is to obtain the ID of that menu. To do so, use your browser’s Inspect Element tool. You’re looking for something like toplevel_page_{menu-slug} or menu-posts-{post_type}.

To add the Dashicon to the menu, use this CSS. Remember to substitute toplevel_page_{menu-slug} for the menu ID and content: '\f174'; for the Dashicon CSS code.

#adminmenu #toplevel_page_{menu-slug} div.wp-menu-image:before {
    content: '\f174';
}

If you’re just overriding another Dashicon, then the above is all that is needed. If the menu already has an image icon embedded in the HTML, you will need to add this CSS:

#adminmenu #toplevel_page_{menu-slug} div.wp-menu-image img 
    display: none;
}

If the menu already has an image icon applied through CSS background images, use this CSS instead of the above:

#adminmenu #toplevel_page_{menu-slug} div.wp-menu-image {
    background: none !important;
}

You can include the CSS code in a plugin, theme’s functions.php or code snippet by wrapping it with this PHP code:

function replace_admin_menu_icons_css() {
    ?>
    <style>
        /* CSS code goes here */
    </style>
    <?php
}

add_action( 'admin_head', 'replace_admin_menu_icons_css' );

Click for before and after shots of my own admin menu.

5 Comments


  1. Something is missing, to make it work, just after the code you need to add:

    add_action(‘admin_head’, ‘replace_admin_menu_icons_css’);

    Otherwise the function never gets called.

    Thanks for the info! changing the icon of a plugin now.

    Reply

    1. Thanks for pointing this out, I’ve fixed the post up. I did have this line originally, but it went missing while I was trying to get the code to display properly in the WordPress editor.

      Reply
  2. Terence Milbourn

    While you’re on the subject ~ Admin Color Schemes ~ they should be switchable NOT by user but by site. Think how much swearing and shouting that would save!

    Seriously though, what donut thought that making it switchable by user profile was a good idea? I guess there’s some things about WordPress and WP developers I will never understand.

    By the way, if you ever come across a code snippet that I can add to my functions.php and give me a choice of selecting admin color scheme by site, rather than user, I will be forever in your debt.

    Reply

    1. You can force a specific admin colour scheme like this:

      add_filter( 'pre_user_option_admin_color', function ( $scheme ) { return 'ectoplasm'; } );

      Replace ectoplasm with the name of the colour scheme.

      Then you’ll want to remove the colour scheme picker from the user profile page:

      remove_action( 'admin_color_scheme_picker', 'admin_color_scheme_picker' );

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>