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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

Reader Interactions

Comments

  1. Cheryl Smith says

    February 16, 2020 at 6:50 pm

    That’s weird. The question marks are showing on the images and I haven’t even pasted them anywhere.

    Log in to Reply
    • Brad Dalton says

      February 17, 2020 at 3:40 am

      Which images? Please link to the page containing the image or a screenshot with a arrow to the image

      Log in to Reply
      • Cheryl Smith says

        February 17, 2020 at 5:56 am

        https://solowebsolutions.com/roseburg/

        I followed the instructions here: https://wpsites.net/web-design/display-caption-text-on-image-hover-in-wordpress/

        and then I was trying to add an icon. But didn’t know where to put the code. Then I saw the question marks and was surprised since I hadn’t entered the code. I would still like to know how to use a different icon, ie where do I place the code that I got for the Dashicon.

        Log in to Reply
        • Brad Dalton says

          February 17, 2020 at 8:32 am

          You don’t need to add the HTML. This is a different tutorial than the one you linked to. You can change the icon by changing the value for this declaration in the CSS rule on line 1742 in your style.css file.

          content: "\f223";

          Change f223 to match your icon. Click the Copy CSS link next to the icon of your choice https://developer.wordpress.org/resource/dashicons/#email

          Log in to Reply
  2. Ross says

    April 4, 2014 at 6:45 pm

    Hey Brad, I’ve just finished creating a button generator which includes the dashicons so you can easily use them in your themes 🙂 https://wordpress.org/plugins/forget-about-shortcode-buttons/

    Log in to Reply
  3. Franco Musso says

    December 17, 2013 at 6:38 am

    PS If anyone wondered how to use one of the dashicons as the icon for a custom post type, it couldn’t be simpler – just include the icon name e.g.
    ‘menu_icon’ => ‘dashicons-calendar’ in your register post type arguments – no need for any manual html or css

    Log in to Reply
    • Brad Dalton says

      December 17, 2013 at 9:14 am

      hahaha. Excellent. Thanks for sharing the cool tip Franco.

      Log in to Reply
  4. Franco Musso says

    December 17, 2013 at 6:24 am

    Scarily good timing! I searched high and low for a tutorial on this yesterday, and then it was delivered by twitter when I gave up! This will be a great help for the admin theme I’m working on. The dash icons look great and all the better that they’re included out the box. Thanks so much for sharing 🙂

    Log in to Reply
    • Brad Dalton says

      December 17, 2013 at 6:34 am

      Hey Franco

      I published this post before 3.8 was released which wasn’t good timing so i thought i’d share it again after as it only works in 3.8+.

      Thanks for the kind words.

      Log in to Reply
  5. Herb Trevathan says

    December 4, 2013 at 12:52 am

    This post was great also, read this a day or so ago…diggin’ the new look : )

    Your website inspires me to do more with my design. I do so much for others i neglect my website, and always want to change it but don’t since my website really serves no purpose other than my entertainment haha…maybe I should entertain myself with it and just let it evolve graphically like your website here…

    Thanks for great content, I use your snippets often in production work…I should not be too busy to comment on what it is that I use.

    Log in to Reply
  6. john says

    December 2, 2013 at 11:08 pm

    Cool Tip. Thanks Brad.

    Log in to Reply
    • Brad Dalton says

      December 2, 2013 at 11:10 pm

      Thanks John and good luck with the team page.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.