How to Use Dashicons in WordPress as Admin Menu Icons

WordPress 3.8 introduced nice MP6 menu icons on dashboard which appear beside different settings menu e.g. Posts, Media, Appearance etc. These icons are not images but build with CSS. If you are a WordPress plugin or theme developer, you can use these icons to have a nice minimal MP6 icon for your product’s dashboard menu.

dashicons

Add or Change the Dashicon of plugin

You can easily customize the installed plugin’s dashicon to  your own dashicon by following the stepwise guidelines given below :

Step 1 : Go to http://melchoyce.github.io/dashicons/. Here you will see all the dashicon that can be used with WordPress.

Step 2 : Click on the dashicon you would like to see in admin dashboard. On the top of this page you will see enlarged view of this dashicon & the links to copy css, html & glyph.

Step 3 : Click on the Copy CSS link. Copy the content shown in its window, then paste in your CSS :before selector.

For example, here is the piece of code to add or change dashicons for one of our plugin named Roster. Previously the Roster Slider dashicon on my dashboard would look like this Selection_068 & I wanted to change it to some other dashicon. I went to http://melchoyce.github.io/dashicons/, got the css content & pasted it in plugin’s file where the menu is defined (as shown below ). Now this CSS added in the admin head section will apply this new dashicon for my plugin’s settings menu. If you do not change your plugin’s icon, a default icon will appear.

//Below css will add the menu icon for Roster Slider admin menu
?>
<style type="text/css">#adminmenu #toplevel_page_roster-slider-admin div.wp-menu-image:before { content: "\f232"; }</style>
<?php
}
add_action('admin_head', 'roster_slider_admin_head');

After applying the above code, my Roster Slider dashicon changed to Selection_064

Use Dashicons as Admin Menu Icon

Dashicons page is having so many icons. If you want to show facebook, twitter dashicons in your WordPress site linking the visitors to your facebook & twitter pages, then follow the guidelines as below :

Step 1 : Go to http://melchoyce.github.io/dashicons/. Here you will see all the dashicon that can be used with WordPress.

Step 2 : Click on the dashicon you would like to see in admin dashboard. On the top of this page you will see enlarged view of this dashicon & the links to cpy css, html & glyph.

Step 3 : Click on the Copy html link. Copy the content shown in its window & paste it in your HTML.

e.g. If you want to display these social media dashicons in the sidebar of my Worpress site, I will add a text widget to the main sidebar area. In the text field of Text widget I will  paste the html link in the following manner.

<a style="text-decoration:none;" href="http://twitter.com/YourTwitterId"><div class="dashicons dashicons-twitter"></div></a> <a style="text-decoration:none;" href="http://www.facebook.com/YourFacebookProfile"><div class="dashicons dashicons-facebook-alt"></div></a>

You can also change the size of these icons by customizing the its font size in the css. You can assign different color as well.

I hope you find this tutorial helpful. Now you can easily Use Dashicons in Theme’s or Plugin’s Menu. If you have any query or suggestion regarding the same, do share with us.

Leave a Reply

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