I wanted to add an icon to my wordpress site on my navigation menu bar; specifically an RSS icon. I muddled around for quite awhile, including trying out several plugins that weren’t exactly what I wanted, reading a bunch of articles, looked at a few videos. I was sure there was an easy way out there. Yep, I found it.
Here’s how I did it.
- Go get the Plugin Font Awesome 4 Menus.
Font Awesome is FREE, it’s mobile responsive, it makes the whole process real simple.
- Install and activate it on your site.
- Go into your Menu and make sure you can edit CSS. It will not be ticked by default, so click on the ‘screen options’ tab in the upper right side of your screen and click on the CSS classes.
- Click on Custom Links to show the dropdown options.
Here’s where it gets interesting. You don’t see anything different here – nothing about icons. The trick is that you have to fill in the URL and link text boxes and click add to menu before the CSS shows. In my case, I wanted an RSS icon so I used my feedburner URL and used ‘RSS’ as the link text.
It will now show up as a Custom Link on your menu structure.
- Click on the Custom Link dropdown arrow to show the link details.
- The CSS Classes box is where you put the code for the image you want. If you just want the text, leave it blank.
- Get the Font Awesome Cheatsheet. This has a HUGE amount of icons and their codes. All the codes start with fa (for Font Awesome, duh), and are alphabetically arranged after that. Copy the one you want and paste it in the CSS Classes box.
- Hit Save and you’re done.
When you go and check your site you will see the icon right where you put it.
Hope this helps you as much as it helped me.