Icons in WordPress Menus

Those of you who are familiar with WordPress know what a great tool it can be to build an awesome website. With it’s thousands of themes and millions of plugins the options are endless. Sometimes though it can be a real pain to customize and unless you know your way around PHP, HTML and CSS it can be impossible to truly get the customization you want. Through trial and many errors though I found out a way to include Icons in WordPress Menus.

Using my own website as an example I’ll show you how, step by step with pics.

 

Step 1: Here is what my menu looked like at first. Looks bad and not what I want at all. So how do I get the look I’m going for?

Step 2: Realizing that I cannot hard code the icons in the back-end because of how WordPress works not to mention it wouldn’t be dynamic. I headed over to Appearance > Menu and analyzed the options that it gives me.

Step 3 (What not to do): Noticing that like with most things in WordPress it gives you a CSS Classes field. So I tried giving that a shot. However by doing that it displays icons that are grey and not even part of the <a> tag.

Step 4: So what do you do? Well Believe it or not if you actually add the HTML you normally would hand coding, into the Navigation Label you can customize the menu how you like.

NOTICE:

As you can see above, the HTML will appear in the top section where normally just the Label is. Don’t worry though it will not appear on the front-end.

 

Final outcome: As you can see I was able to add font awesome icons in WordPress menus. By adding <SPAN> tags it stacks the icon and text neatly and shrinks the font size automatically.