Nav Icons Not Showing Up

[jame58rown]

I need an icon before a menu item. I have the following in extra.less but it's not showing up

The Nav Id
<a href="https://www.my site/link/" class="offCanvasMenu-link" data-xf-key="12" data-nav-id="Discounts">Discounts</a>

What is wrong here, thanks

a[data-nav-id="Discounts"]:before {
color: #ffffff;
.m-faBase();
.m-faContent(@fa-var-sterling-sign);
}

 

[AgentPete]

Try hex to specify the icon? EG

a[data-nav-id="your_stuff"]:before { .m-faContent("\f007"); }

 

[Russ]

That name is from Font Awesome 6 which isn't included in XenForo. You need to look here:

Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

Search all the Version 5 icons and match your project with a look and feel that's just right. Better yet, try Font Awesome 6 with the all-new Sharp Solid icons.

fontawesome.com

Try hex to specify the icon? EG

a[data-nav-id="your_stuff"]:before { .m-faContent("\f007"); }

Just a heads up, while this has also always been my method, it will no longer work on XF2. The new one will require the name:

.m-faContent(@fa-var-sign-in-alt)