Replace WordPress Admin Menu Icons

Replace WordPress Admin Menu Icons

tOne 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.

9 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
  3. Dono

    I’m not well versed in PHP, so I couldn’t figure out how to write the function properly to achieve what I’m trying to do. I assumed I had to submit my custom icon file and it would simply be listed among the Dashicons on the WP Icon page. Thus giving me the ability to call it in my CSS like so :
    #wpadminbar #wp-admin-bar-my-sites>.ab-item:before,
    #wpadminbar #wp-admin-bar-site-name>.ab-item:before
    {
    content: “\f488″;
    top: 2px;
    }.
    I want to replace the first icon in the wp-admin-bar menu on the front-end, which is typically the image of a gear. I know I can change it for something else from the list of Icons on this web page: http://melchoyce.github.io/dashicons/, by simply changing content: “\f488″; to a generated CSS from one of the Icons listed.
    Can you help me with the proper way to write the function and how to call my custom Dashicon to display on the frontend.

    Reply

    1. You can’t add new icons to that repo – it is only for icons that are built in to WordPress. Instead, you can create your own icon font and include it in your plugin. IcoMoon is a good tool to use here.

      There might be a better method that has come about since then, but I haven’t looked into it yet.

      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=""> <s> <strike> <strong>