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.
That’s weird. The question marks are showing on the images and I haven’t even pasted them anywhere.
Which images? Please link to the page containing the image or a screenshot with a arrow to the image
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.
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.
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
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/
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
hahaha. Excellent. Thanks for sharing the cool tip Franco.
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 🙂
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.
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.
Cool Tip. Thanks Brad.
Thanks John and good luck with the team page.