How To Add An Icon To Your WordPress Menu Bar

social media icons image

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.

font awesome plugin image

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.

Css Classes in Screenshot Options image

  • Click on Custom Links to show the dropdown options.

custom links image

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.

css classes image

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






Loved this? Spread the word

About the Author

Bo Johnson

Related posts

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}