How To Add Icons To Your WordPress Menu

How To Add Icons To Your WordPress Menu

It's the little things that totally get me all giddy about blog design. Like those ADORABLE little icons some people have on their navigation bar next to their menu links. Like mine here below. They add no particular value or ranking edge to your blog. Just for aesthetic purposes. But who doesn't like a pretty blog right?

Or look up to my nav bar so you can see what mine look like.

These are called Font-Awesome icons and they are completely free and compatible across all browsers. There are TWO steps involved to add these icons so they show up in your navigation menu on your WordPress blog.

STEP 1: Search and download this free plugin called Font Awesome 4 Menus. Just like that. Here is what it should look lik:e

STEP 2: Once you have activated the plug in, head over to your menu and COPY/PASTE this tiny bit of code in orange below right in front of your Menu Navigation Label text.

For example, here is what my HOME menu looks like with that bit of code in front <i class=”fa fa-home”></i> Home. And here is a picture of where that Navigation label is at (although it only shows part of the text).

So open the menu, then the name you want to add the icon next to and PASTE this code <i class=”fa fa-home”></i> right in front of it. I also add a space after to create some, well space.

I am sure you have other navigation menus and I am sure you don't want a house in front of each one. So, no problem, simply head over to the font-awesome main icon site and look for the icon you want to use, click it and it will render the correct code for that icon. Copy/paste THAT code to have that icon display. Here is an example:

AWESOME RIGHT? You can mess around with that bit of code easily to make the icons bigger or a different color. This is a tiny bit more advanced but check out all the code tweaks you can make to font awesome here.

Thanks for reading “How To Add Icons To Your WordPress Menu”. If you liked my post, feel free to like, comment or share. That'd be… awesome! 🙂