Navigation icons:
Our styles can 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:
Code:
data-nav-id="whatsNew"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 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.
Code:
a[data-nav-id="whatsNew"]:before { .m-faContent("\f0e7"); }