How to Add Icon to Menu Items

The theme supports the option to add an icon for each label item. It allows you to add a custom font icon or an attached image/SVG icon.

To add an icon, follow the steps below:

1. Navigate to Appearance > Menus > Edit Menus.
2. At the “Select a menu to edit” option, you can choose an existing menu or “create a new menu” one to which you want to add an icon.
   
3. In the “Edit Menu” section, navigate to the item to which you want to add an icon, and click on the dropdown icon in the top-right corner to reveal the menu item options.
   
4. Then scroll down to the “Menu Icon” section, where you will find options to add an icon.
   
5. Icon Classname: this option supports displaying font icons and provides two font options: Foxiz Icons and Font Awesome.
   – If you want to display Font Foxiz Icons, simply enter the class name. To find icons based on your preferences, you can refer to this documentation Ruby Icon ClassName
   – If you want to display Font Awesome Icons, make sure that Font Awesome is enabled in “Theme Options > Theme Design > Awesome Fonts” if you are using the class names of this font icon.
6. or Attached File/SVG Icon: input the attached image/SVG url to display your icon.
   Attachment/SVG URL: This option displays the icon in light mode.
   Dark Mode – Attachment/SVG URL: This option displays the icon in dark mode. If you are not using the dark mode feature, you can leave this option blank.
7. Click “Save Menu“

Enable Font Awesome to support icon display for this font by following the steps below:

1. Navigate to Foxiz Admin > Theme Options >Theme Design > Font Awesome
   
2. In this section, you will find the Font Awesome option. Simply enable it to support this font.
   
3. Click “Save Changes“

How to Create Mega Menu Using Ruby Template (Menu Builder)

How to Edit or Add Menus on Mobile Devices

How to Add More Button Menu to the Main Navigation

How to Enable the Menu Sticky

How to Create & Setup Header Menus?

0

0