Adding Dashicons in WordPress Themes and Plugins

2 minutes read

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

Dashicons Resource page

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.

Facebook Twitter LinkedIn Telegram Whatsapp Pocket

Related Posts:

There are several different plugins for WordPress that one can use to create a message and discussion forums for community conversation. Also, plugins are useful to add functions and styling to these forums. The three plugins that will be discussed in this art...
WordPress plugins are version-based. You receive updates in your admin dashboard as soon as a new version update for a plugin is available. For some plugins you might feel like the previous version was better than the current one. And then you may want to roll...
WordPress automatically adds its current Version number to the head section of the themes. If you view the source of a WordPress-based website, you may find out the WordPress version it is using. Below given is the meta tag that carries that version informatio...