WP SITES

2317

Original Genesis Tutorials & 5000+ Code

Snippets

Adding Dashicons in WordPress

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.

If you want to use them in 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.

click icon

Then click the Copy HTML link to copy the HTML for the icon you want to use.

copy html

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.

sample dashicon

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.

admin menu dashicon

Note: This method only works in sites running WordPress 3.8+.

More Tutorials Related To Using Dashicons