Clicky

Tutorials

What Are Dashicons and How To Use Them In WordPress

So there is a good chance that after WordPress 3.9, you guys have heard a bit about Dashicons and wondered what they were.

Dashicons are the official icon font for WordPress. You can actually see them used in your WordPress Dashboard menu items. All those little icons in your menu are examples of the Dashicon font.

The Dashicon font is built right into WordPress, yet few know how to use them. You can do some cool things like add them to your website menu or even in your posts/pages and so on.

Another great thing about using Dashicons is that they are always pixel perfect no matter what size you have them at. And, unlike large photos that slow down your site, Dashicons don’t effect your page speed. (Can I get a whoop-whoop!)

There are few different ways that you can enable the icon font in your WordPress site and I’ll walk through the two easiest ones.

Enable Dashicons With This .PHP Snippet

The easiest way to have quick and easy access to the Dashicon set is by adding some .PHP code to your theme. Since WordPress now has the font built into it, the code is rather simple to add.

However, you should probably only use this snippet if you’re using a Child Theme as messing with the Functions.php file in a main theme is general a no-no.

Copy this code below and paste it in the functions.php file of your child theme.

You can also find this code on GitHub Gist here.

[php] add_action( ‘wp_enqueue_scripts’, ‘load_dashicons_front_end’);
function load_dashicons_front_end()
{
wp_enqueue_style( ‘dashicons’ );
}
[/php]

Not too fond of pasting code in a delicate area of your theme?

No worries! This next option is easy too!

Use The Dashicon HTML and Modify With CSS

There is a pretty simple way to use Dashicons on your site without using PHP code. Some simple HTML and a bit of CSS can do the trick just as easily!

Here are the steps:

  1. Go to the Dashicon Site.
  2. Select the Icon you want to use
  3. Select the option to “Copy HTML”, and copy the code given for the Icon
  4. Paste the code into the Text Editor or Text Widget of your choosing
  5. Modify look of your Icon with custom CSS

By default, the icons will come sized at 20 pixels, but using FireBug in Firefox or the Inspect Element option in Google Chrome will help you find the CSS element for your to manipulate the CSS code live.

After you get the Icon to the correct look and feel that you desire, copy it from your Inspector of choice and copy it into the Custom CSS area in your WordPress Dashboard.

I also mentioned adding the icons to the menu on your website. If you’d like an easy way to add an icon to your navigation menu, then check out this tutorial as well:

Have you guys had a chance to use Dashicons? We’d love to hear how you used them!

Share this Story
  • how-to-use-dash-icons
    Tutorials

    What Are Dashicons and How To Use Them In WordPress

    So there is a good chance that after WordPress 3.9, you guys have heard a bit about Dashicons and wondered what ...
Load More Related Articles
Load More By Ariel Rule
Load More In Tutorials

One Comment


  1. J.Duncan - Paperless Creations

    August 4, 2014 at 8:38 am

    Neat! Will have to remember this if I am ever using a theme that doesn’t have icons built into it. Though since I use the Divi theme from Elegant Themes, they have the fonts built right into the page builder.

    It is nice that font-icons do not slow down your site, and can scale up do to their vector nature. We use vector fonts on most of our partners websites, and they really make a difference.

    Seems like website meta design keeps improving each and every day!

    Thanks for the great article!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Join Over 50,000+ Subscribers

Interested In
  •   
  •           
  •                      

Search

WordPress Plugins and Themes