Replace WordPress Admin Menu Icons

19

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.

19 Comments


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

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

      1. Sorry for the late reply, I must have missed yours.

        Well, no actually, it doesn’t help because it answers two questions I didn’t ask.

        My goal is to be able to switch the color scheme for the super-admin dependent upon which blog he visits in a multisite setup.

        In other words, if he is the dashboard on the primary blog (#1), its “flat”, and if in blog #2 its “blue”.

        And what would be ideal is if that the color scheme went to “red” in any option in the Network Admin dashboard was selected.

        To me that’s clean, clear and logical. Unlike the single color scheme, at the moment, which follows the admin around the site.

        Do you see what I mean?

        Reply

        1. I understand what you’re hoping to achieve now, but I think that the solution is more than a simple code snippet and would require a custom plugin. If you’d like me to write something for you, please contact me.

          Reply

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

      1. Hi,

        Any ideas for how to do all of this now – today?
        Some of them seem to work, but for an example, WooCommerce does not change no matter what I do.

        The code above does nothing no matter in what way I “combine” it with the options above.

        Thanks!

        Reply

        1. Hi Bjornen,

          It looks like WooCommerce also overrides the standard dashicon font for its menu icon, so you can use the same code I posted above, but you also need to add a line to reset the font:

          
#adminmenu .toplevel_page_woocommerce .wp-menu-image::before {
        font-family: dashicons !important;
        content: '\f174';
}
          Reply

  6. I love Code Snippets, but after the 4.6 Wordpress upgrade I had to deactivate it because it completely disabled my advanced image editing options with pages (old or new pages). I found this by deactivating all the plugins one by one. With code snippets disabled, my image editing options now works as normal. Previously, I just got the spinning wheel forever.

    Reply

    1. Hi, sorry to hear this, I’d like to do what I can to fix it. Are you using a plugin for the advanced image editing options? If so, which one? And does this error still occur with the Code Snippets plugin active, but with no snippets active?

      Reply

  7. Can I please know about doing the same function in PHP with add_filter() function? BTW, really helpful article. Waiting for your reply.

    Reply

    1. See the last code snippet in the post. It does what I think you are asking for.

      Reply

  8. I’m trying to replace the Users icon (default Wordpress icon) with another dashicon. But I cannot manage to do it?

    How do you change default menu icons?

    Reply

    1. It’s actually even easier than for plugins. Here’s an example:

      
#adminmenu .menu-icon-users .wp-menu-image::before {
    content: "\f511";
}

      Just make sure you change the glyph code in the `content` property to the glyph for the icon you want.

      Reply

Leave a Reply to Ramiro Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.