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