Add an icon to a menu item

You can add a Font Awesome icon to appear with a nav menu item. This works in all of the following locations:

  • Any nav menu item in Woo360 Theme
  • Any theme that has Font Awesome enqueued
  • The Page Builder Menu module in both regular page layouts and Themer layouts.

For example, suppose you want to add a shopping cart icon to a menu item labeled Cart, or a star icon next to the account link in the menu as shown in the following screenshot.


Here's how to do it.

1

Get the Font Awesome icon markup

  1. Go to http://fontawesome.io/icons/, select the icon you want, and click it.
  2. Copy the HTML markup from the page that opens.
    The aria-hidden attribute is for accessibility requirements for screen readers.
2

Paste the markup into the menu item

  1. In the WordPress admin panel, click Appearance > Menus.
  2. Click the down arrow next to your Cart menu item (or whatever menu item you're using) to open its properties.
  3. In the Navigation Label field, paste the Font Awesome HTML markup before or after the Cart text, depending on where you want the icon to appear, as shown in this screenshot:
  4. Click Save menu.

The icon should now appear next to your menu item.