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() {
        /* CSS code goes here */

add_action( 'admin_head', 'replace_admin_menu_icons_css' );

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

There are 11 comments Join the conversation

Join the conversation

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