Our styles have the ability to easily insert icons into the navigation for a unique look. We support a variety of default and third-party links(add-ons) out of the box and are constantly adding more support.

Enabling navigation icons

To enable the navigation icons, you'll need to head to:
Style Properties -> Header and navigation -> Check: Enable navigation icons.
You can have the icons shown next to the navigation link(Inline) or to be above the navigation links(Above). The following are instructions to allow you to edit the icons on your navigation links.

Missing icons? You'll need to add a little bit of CSS

1.) Grab the data-nav-id for the navigation link

You'll need to right-click the navigation link and click "Inspect elements"(on most browsers).
You're looking for the "data-nav-id". For instance, the What's New link has this data-nav-id:


2.) Add the custom CSS to the extra.less template

First, find the icon you'll want to use. Here's a cheat sheet for all of the Font Awesome codes.

From there, you'll need to place this inside extra.less but replace the nav-id and the icon code from the steps above.

a[data-nav-id="whatsNew"]:before { content: "\f000";}