A while back, I did a tutorial on how to add Font Awesome icons to menus in the Genesis Framework. That tutorial was handled primarily with CSS. This snippet uses PHP to dynamically prepend some additional markup to a menu-item’s anchor tag. It’s accomplishing almost the same thing as my last tutorial but this one is theme agnostic (rather than Genesis-specific) and puts the icon within the anchor text, making it part of the link (the previous tutorial placed it outside the link and, therefore, it was non-clickable). If you have not yet added support for Font Awesome icons, see the previous post for instructions.

This code still relies on the use of the CSS Classes field for menu items. If you’re unable to see this field when editing your menu items (Appearance → Menus), open the Screen Options dropdown in the top-right corner of the screen and make sure this option is selected. Then, add the Font Awesome classes to the CSS Classes field. For example, to add a shopping cart icon, you’d add “fa fa-shopping-cart”. Adding “fa” in addition to the actual icon class (i.e. “fa-shopping-cart”) is critical because this code checks to see if that class is present and continues only if it is.

Finally, it removes the classes from the parent element. By default, WordPress adds these CSS classes to the parent list-item tag (<li>), which will lead to the icon showing twice.