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