How To Add Font Awesome Icons To Your Custom Menu Items

If you'd like to make your navigation menu go from looking something like this:

To something like this:

Then follow these simple steps:

  1. In your WordPress Dashboard go to Genesis > Dynamik Design > Body > "Font Awesome Styles" and check the box next to "Add Support For Font Awesome Icons" ( note that if you're using the Genesis Extender Plugin instead of Dynamik then go to Genesis > Extender Settings > General Settings > "Font Awesome Styles").

  2. Go to the following Font Awesome page to select the Icons you would like to add to your menu items:

  3. If you haven't already, create a Custom Menu in Appearance > Menus in your WordPress Dashboard.

  4. Select a menu item in your Custom Menu that you would like to add an Icon to (let's use the "Home" page as an example) and then click the down arrow that's located just to the right of the menu item name.

  5. Under "Navigation Label" where in our case we would find the text "Home", delete that text and paste in the following text (note that this is specific to the "Home" menu item, so you'll need to adjust as it's relevant to your specific menu item): <i class="fa fa-home fa-fw"></i> Home

  6. Note the fa-home class code in step 5. That's specific to this icon: So yours would of course be whatever Icon you selected for your menu item, so be sure to replace that fa-home class code as well as the actual menu item name, which is "Home" in our example.
  7. Once you've done this you should be able to save these changes to your Custom Menu and then re-fresh the front-end of your site and see your Font Awesome Icon. If you see it then you should be good to go and ready to add any more to your menu as needed.

If you don't see your Icon then either you didn't add the correct Font Awesome class code as noted in step 5 or Dynamik's version of the Font Awesome stylesheet doesn't reflect the latest version of Font Awesome. To check this out be sure to go to this page: And note the link in step "1." under "EASIEST: BootstrapCDN by MaxCDN". Note which version number is being used there. If it's a higher version number than the "Font Awesome Version" found in Dynamik Settings > Info > "Version Information" then you'll either have to wait until the next Dynamik update (which will include the latest version of Font Awesome) or you can manually add the latest version of Font Awesome.

To manually add Font Awesome you just need to paste  THIS CODE to your Dynamik Custom > Custom Functions, making sure to edit the two version number instances in the code according to the actual latest Font Awesome version. Then click "Save Changes" and you should now have the latest version of Font Awesome active on your website.