• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

WP SITES

2468

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Subscribe
  • Register
  • Videos
  • Log in

Need Help? - Get Coding Support Now

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.

#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.

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

  • Add Icons To Nav Menu Items in StudioPress Themes
  • Using Dashicons To Style Unordered Lists
  • Custom Social Sharing Buttons Using Dashicons
  • Add Icon Before or After Entry Title
  • How To Add A Icon After A Read More Link
  • Add Drop Down Indicators To Nav Menu Items Using Dashicons
Subscribe for new Genesis Tutorials

Primary Sidebar

Recently Coded

  • Infinity Pro – Change Team Page From 4 To 3 Columns
  • Infinity Pro Vertical Menu
  • Genesis Sample Theme – Custom Archive Page Template With Different Hero Images
  • Foodie Pro – Reposition Search Box Before Nav Menu
  • Showcase Pro – Use Custom Image As Single Post Entry Header Background

Brad Dalton Specializes In Genesis child theme customization & code modification.

Advertise · WPEngine · Genesis · Log in

  • Membership
  • by Theme
  • Contact
  • RSS
  • Newsletter ( Twice Weekly )