Dashicons are already included in WordPress 3.8 so all you need to do is add HTML and CSS in your theme to use them in the backend.
#Load Dashicons
If you want to use Dashicons on the front end, you will need to enqueue them using PHP code in your child themes functions.php file:
Dashicons HTML
Simply go to this website and click the icon you want to use.
Then click the Copy HTML link to copy the HTML for the icon you want to use.
Paste the HTML into your editor or text widget
Dashicons CSS
Add CSS code to the end of your child themes style.css file.
.dashicons-admin-plugins:before {
content: "\f106";
display: inline-block;
color: #1EC9B3;
-webkit-font-smoothing: antialiased;
font: normal 20px/1 'dashicons';
}Modify the CSS code to suit your own styling preferences.
The selector class .dashicons-admin-plugins and content: “\f106”; declaration in the CSS rule will need to be different for each icon which you can grab from the Copy HTML link on the Dashicons website.
And here’s an example where i have changed the color and size from 24px to 150px using the exact same CSS code as above.
Add Dashicons in Admin Menu
Thanks to Franco in the comments who pointed out that how easy it is to add Dashicons in your admin menu.
An example of this would be adding a custom icon for a custom post type. You can see where i added this line of code in the code for creating custom post types.
'menu_icon' => 'dashicons-admin-users',And here’s a custom dashicon used on a CPT named Members.
Leave a Reply
You must be logged in to post a comment.