WordPress Menu Item Icons

In WordPress 3.8 the core had a change to all icons, they now use Dashicons which are fonts that mean you can display an icon by simply adding a CSS class. This can change a few things in the admin area of your application, for example when adding menus to the admin area you might need to change the icon to use a CSS class. If you have created any new admin pages you might need to change the way the icon at the top of the page is displayed to use the new CSS classes.

#Dashicons

This is an open source project that you can download the latest version from Github. Dashicons WordPress will get the latest version of this and include it in the release. To understand how you can use these in your projects you can have a look at the documentation of Dashicons.

Dashicons Documentation

#Menu Item Dashicons

There are a few times when you are going to need to use these for new menu items, this will either be when adding a new menu in the admin area or by creating new post types. When you are creating the new post type you will use the function register_post_type( $post_type, $args ). One of the arguments is menu_icon which will be where you can specify the dashicon CSS class to use for the menu.

function custom_init() {
    $args = array(
      'public' => true,
      'label'  => 'Products',
      'menu_icon' => 'dashicons-format-audio'    // Displays a music note icon
    );
    register_post_type( 'products', $args );
}
add_action( 'init', 'custom_init' );

Inside the menu_icon argument you can replace this with any of the CSS classes found on the dashicons documentation. If you want to use your own menu icons then you can provide the absolute path to the icon you want to use. ### Add Menu Item

The other time when you will need to define the menu icon you want to use is by using the WordPress function add_menu_page().

<?php add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position ); ?>

As you can see from the above parameters is the 6th parameter is for icon_url which will allow you to change what icon you want to use on the menu. The default will be the Gear icon that is used by all new menu items but you can change this to be anything you want. To change the icon to a question mark you need to use the CSS class * dashicons-editor-help*.

<?php add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, 'dashicons-editor-help', $position ); ?>

#Added In WordPress 3.9

If you have recently upgraded to WordPress 3.9 then you will now have extra dashicons available to use on your WordPress website. - dashicons-media-archive - dashicons-media-audio - dashicons-media-code - dashicons-media-default - dashicons-media-document - dashicons-media-interactive - dashicons-media-spreadsheet - dashicons-media-text - dashicons-media-video - dashicons-playlist-audio - dashicons-playlist-video To see more of the new dashicons you can see them on the WordPress blog. WordPress 3.9 Dashicons