Skip to main content

​
Navigation icons

Add Font Awesome icons to your menu items. Font Awesome 6.5.1 is bundled with the theme, so nothing is loaded from a CDN. Admin path: Appearance → Customize → Vara SaaS → Navigation Icons Screenshot: Customizer → Vara SaaS → Navigation Icons with the enable toggle and per-item icon fields

​
Settings

The per-item icon fields only appear once a menu is assigned to the Primary Menu location. Until then, this section shows a notice instead of the item list. Assign a menu first, then return.

​
Two ways to add an icon

1

Enable menu icons

Turn on Enable menu icons.
2

Expand the section

A field appears for each item in your primary menu, labelled Icon for: (item title).
3

Paste the icon classes

Enter the Font Awesome classes, for example fa-solid fa-rocket.
4

Save

The icon appears next to the menu label immediately.

​
Method 2 — use menu item CSS classes

If you would rather set the icon where you manage the menu, add the classes in the menu item’s own CSS Classes field under Appearance → Menus.
The theme scans menu item CSS classes for Font Awesome patterns and injects the icon automatically. Screenshot: a menu item with fa-solid fa-rocket in its CSS Classes field

​
Font Awesome class syntax

Font Awesome 6 changed how icons are addressed. This is the format you want:
Font Awesome 5 syntax does not work. fas fa-rocket was correct in FA5 but renders nothing in FA6. Use fa-solid fa-rocket. Icon classes are validated on save, so a malformed value is rejected rather than silently rendering an empty box.

​
Icons that suit navigation

Browse the full set at fontawesome.com/search — click any icon and copy its classes.

​
Styling all icons at once

The four styling settings apply to every icon.

​
Accessibility

Decorative icons are rendered with aria-hidden="true", so screen readers ignore them and announce the menu label alone. This is intentional — an icon next to “Pricing” adds nothing for a screen reader user, and announcing “rocket icon, Pricing” is noise.
Do not rely on an icon to convey meaning on its own. If an icon is the only content of a link, add an accessible label — for example a social icon in the footer.

​
Icons and the mobile menu

Icons appear in the mobile menu alongside desktop, and use the same settings. There is no separate mobile configuration.

Header and menus

Where these icons appear, and how the menu behaves.

Footer settings

Social icons use the same bundled Font Awesome, configured separately.