> ## Documentation Index
> Fetch the complete documentation index at: https://vr-it-services-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Add Font Awesome icons to menu items and style them globally.

# Navigation icons

# 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](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/navigation-icons-panel.png)

## Settings

| Setting | Default | Setting key |
| - | - | - |
| **Enable menu icons** | `false` | `vara_saas_menu_icons_enable` |
| **Icon size (px)** | `16` | `vara_saas_menu_icon_size` |
| **Icon spacing (px)** | `6` | `vara_saas_menu_icon_spacing` |
| **Icon color** | *(empty — inherits)* | `vara_saas_menu_icon_color` |
| **Icon hover color** | *(empty — inherits)* | `vara_saas_menu_icon_hover_color` |
| **Icon for: *(each item)*** | *(empty)* | `vara_saas_menu_icon_{item_id}` |

> [!NOTE]
>
> 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

### Method 1 — set it here (recommended)

**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**.

```text theme={null}
fa-solid fa-rocket
```

The theme scans menu item CSS classes for Font Awesome patterns and injects the icon automatically.

**Which patterns are detected**

The theme recognises `fas`, `far`, `fab`, `fal`, `fa-solid`, `fa-regular`, `fa-brands`,
`fa-light`, `fa-thin`, `fa-duotone`, and any `fa-*` class. Setting the icon in the Customizer
takes precedence if you use both.

![Screenshot: a menu item with fa-solid fa-rocket in its CSS Classes field](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/navigation-icons-css-classes.png)

## Font Awesome class syntax

Font Awesome 6 changed how icons are addressed. This is the format you want:

```text theme={null}
fa-solid fa-rocket
fa-regular fa-star
fa-brands fa-github
```

| Prefix | Style |
| - | - |
| `fa-solid` | Solid (default, most icons) |
| `fa-regular` | Regular outline |
| `fa-brands` | Brand logos — GitHub, X, LinkedIn, YouTube |
| `fa-light` | Light |
| `fa-thin` | Thin |
| `fa-duotone` | Duotone |

> [!WARNING]
>
> **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

| Purpose | Classes |
| - | - |
| Products | `fa-solid fa-layer-group` |
| Pricing | `fa-solid fa-tags` |
| Docs | `fa-solid fa-book` |
| Blog | `fa-solid fa-newspaper` |
| Contact | `fa-solid fa-envelope` |
| About | `fa-solid fa-circle-info` |
| Careers | `fa-solid fa-briefcase` |
| Login | `fa-solid fa-arrow-right-to-bracket` |
| GitHub | `fa-brands fa-github` |

Browse the full set at [fontawesome.com/search](https://fontawesome.com/search) — click any icon and copy its classes.

## Styling all icons at once

The four styling settings apply to every icon.

| Setting | Effect | Note |
| - | - | - |
| **Icon size (px)** | Sets the square size of the icon | 16 aligns with typical menu text |
| **Icon spacing (px)** | The gap between icon and label | 6 is a safe default |
| **Icon color** | Icon color at rest | Empty means it inherits the menu text color |
| **Icon hover color** | Icon color on hover | Empty means it stays unchanged |

**Leave the colors empty unless you have a reason**

Empty color settings inherit the link color, which means your icons automatically follow hover
and active states. Setting an explicit color fixes them, which is useful when you want icons to
stay a fixed accent color regardless of menu state.

## Accessibility

> [!NOTE]
>
> 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.

## Related

> **[Header and menus](/customization/header-and-menus.md)**
>
> Where these icons appear, and how the menu behaves.

> **[Footer settings](/customization/footer-settings.md)**
>
> Social icons use the same bundled Font Awesome, configured separately.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.