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;
Last edited:
That name is from Font Awesome 6 which isn't included in XenForo. You need to look here:

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:


Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.