Dashicons | Those Lovely Little WordPress Icons

dashicon menu

This post may contain affiliate links or Google Ads and we may earn a small commission when you click on the links at no additional cost to you. As an Amazon Affiliate, we earn from qualifying purchases. This is at no additional cost to you and helps with our website expenses.

Don't be shy. Share this to the world!

Oh my! I started using Dashicons today and I think I’m in love. In fact, I might have taken my fascination with them a little too far. What’s a dashicon, you ask? Well, let’s take an example right from this post I’m writing in the WordPress CMS.

DashiconsBut wait! Dashicons aren’t only for the WordPress dashboard! You can use them in all kinds of handy places, like your navigation, widgets, content, and posts.

Using Dashicons in the Navigation Bar

There are a few different ways to have images or icons in your navigation bar. Using dashicons for your navigation image is one of the easiest way yet. You can find the html, CSS, or glyph for dashicons right here.

Most (maybe all but I haven’t tried it on all of them) Genesis themes come pre-loaded and ready for dashicon use. Reason number 32,482 why I love the Genesis framework and child themes.

Enter my shameless plug for Genesis themes and StudioPress.com and hell yes, that’s an affiliate link and I stand by everything Genesis!

Let’s get down to business. We’re going to put the home dashicon in the home page menu item.

First go to the easy web page where all those little dashicons are in pretty rows of awesomeness. Click here to see them in their glory and get the needed code.

Dashicon Github

Click on the dashicon that you would like to use. Since I’m showing you how to use the home page dashicon, go ahead and pick that one. Next click on the “Copy HTML” link at the top. Copy that little code and get ready to do some pasting.

Go directly to the menu section of WordPress. That’s under Appearance (with the cute paint brush dashicon) and paste the code in the Navigation Label section. Then don’t forget to click save.

Dashicon Menu

That’s it! If you want to still use the word for the menu item, just type it in right after the pasted code. And one more cool thing about it is that the dashicon inherits the property of the navigation menu CSS!

Want to see the results? Just scroll on up and take a look at the home page button in the navigation on this site.

Don't be shy. Share this to the world!
Posted in:

Elizabeth Crane

As an owner of Ranking Edge, Elizabeth Crane oversees all projects and designs and develops websites. She specializes in (and loves) everything WordPress. Her childhood included not wearing a helmet, drinking from the hose, not wearing a seat belt, and playing in the neighborhood streets. And yes, she is still alive.

Leave a Comment