Add an icon to a menu item

It’s easy to add a Font Awesome 5 icon to appear as a nav menu item. The icon can replace menu text or appear before or after menu text. This works in all of the following cases:

  • Any nav menu item in EntertopWP Theme
  • Any theme that has Font Awesome enqueued
    See the note below to use this technique with other themes.
  • The EntertopWP Menu module in both regular page layouts and Themer layouts.

For example, suppose you want to replace an existing menu item labeled Cart with a shopping cart icon, as shown in the following screenshot.

Notes

The Font Awesome site has instructions to use fonts that require inserting code with a link to their Content Delivery Network (CDN) into the <head> tag of your site. That step is not necessary with Beaver Builder because it loads the free Font Awesome 5 icon set locally for both the plugin and the theme. If your theme does not enqueue Font Awesome 5 icons, you can follow the instructions to link to the Font Awesome CDN.

1. Get the Font Awesome icon markup#

  1. Go to the Font Awesome 5 free icon gallery, find the icon you want, and click it.
  2. Click the Start using this icon button.
  3. Copy the HTML markup from the popup by clicking the Copy icon next to the code.

2. Paste the markup into the menu item#

  • In the WordPress admin panel, click Appearance > Menus.
  • Click the down arrow next to your Cart menu item (or whatever menu item you’re using) to open its properties.
  • In the Navigation Labe l field, replace the Cart text with the copied icon code or paste the code before or after the text, depending on how you want the icon to appear.
    For the example shown in the screenshot above, the code looks like this:
    <i class="fas fa-shopping-cart"></i>
  • (Optional) If you want to resize the icon, you can add a class that Font Awesome will automatically convert to an em unit.
    The mapping of classes to ems is shown on Font Awesome’s Resizing Icons page.
    For example, to increase the icon size to 2 ems, add the fa-2x class like this:
    <i class="fas fa-2x fa-shopping-cart"></i>

Click Save menu.

The icon should now appear on your menu.

Posted in Icons, Knowledge Base, Styles and tagged