Adding Dashicons in WordPress Themes and Plugins

Dashicons, the official icon font for WordPress since version 3.8, now comes packed with every installation. All those neat icons you see in your WordPress dashboard are Dashicons.

Now, the icon font files are the part of your self-hosted WordPress installation, and icons are displayed on the front-end by means of a ready-made CSS file. So, you basically need just the HTML to get these icons work for you.

If you develop things for WordPress, you might found it interesting to integrate Dashicons in the back-end as well as the front-end of your WordPress projects. For so, you may make use of the icon font files and CSS whom I just have mentioned.

How can you do that? This guide explains that in least possible steps.

Dashicons HTML, CSS classes, and glyph code

Assuming you already know about the usage of icon fonts in Web design, you should visit this page to see the whole list of Dashicons, the HTML and CSS as well as the raw glyph code for each icon.

Using Dashicons in WordPress Admin Menus

Each of the top-level Admin menu items in your WordPress dashboard carry an icon. On registering a Custom Post Type or plugin options page, it shows a pin as the default icon (.dashicons-admin-post) before the admin menu item so created.

But, it also lets you to add a different icon for your admin menu item, and below is the code that you use as parameter while registering a menu page or CPT:

'menu_icon' => 'dashicons-admin-generic',

You should changed the marked field in the above code to the class of that icon which you want to show before your admin menu item.

Using WordPress dashicons in the front-end

To make use of the icons in the front-end, i.e. in the widgets, post editor etc., you need the Dashicons CSS to be embedded to the theme. Below is the code that you should add in your theme’s functions.php to do that:

add_action( 'wp_enqueue_scripts', 'dashicons_style_front_end' );
function dashicons_style_front_end() {
  wp_enqueue_style( 'dashicons' );
}

After adding the above code, you should add the icon HTML in the widget or post editor in order to display the particular icon(s).

Hope you enjoyed the post. Feel free to post your thoughts, questions, and comments regarding WordPress Dashicons.