Pixeldust

Customer
I'm using Bolt V2 on xenForo 2.3 and am trying to add Font Awesome icons to the mobile navigation using the guide in the help section linked below. However, the icons are showing as white squares instead of the icons. I've posted a screencap and my code below. Can you please tell me if I'm doing something wrong, and if so, how to fix it?

Using these directions:


Screencap of the icons in my mobile nav:

1721239348365.png


The code I'm using:

CSS:
a[data-nav-id="chapter_stories"]:before { .m-faContent("\f02d"); }
a[data-nav-id="community"]:before { .m-faContent("\f4b6"); }
a[data-nav-id="resources"]:before { .m-faContent("\f05a"); }
a[data-nav-id="help"]:before { .m-faContent("\f60b"); }


Also, I noticed the demo version of Bolt V2 on this site has Navigation and More options headings which aren't showing in my nav menu. Can you please tell me how to enable these? I really like the way they look.

1721239647546.png
 
Solution
On this post:


Go to "Some Key Notes" you'll see there was a change in how XenForo handles the icons. I went ahead and converted your CSS for you:

Code:
a[data-nav-id="chapter_stories"]:before {  .m-faContent(@fa-var-book); }
a[data-nav-id="community"]:before {  .m-faContent(@fa-var-comments-alt); }
a[data-nav-id="resources"]:before {  .m-faContent(@fa-var-info-circle); }
a[data-nav-id="help"]:before {  .m-faContent(@fa-var-map-marker-question); }

Those phrases appear to be missing on the new version by accident (poor merge on my part potentially).

I'll get them added back into the next version.
On this post:


Go to "Some Key Notes" you'll see there was a change in how XenForo handles the icons. I went ahead and converted your CSS for you:

Code:
a[data-nav-id="chapter_stories"]:before {  .m-faContent(@fa-var-book); }
a[data-nav-id="community"]:before {  .m-faContent(@fa-var-comments-alt); }
a[data-nav-id="resources"]:before {  .m-faContent(@fa-var-info-circle); }
a[data-nav-id="help"]:before {  .m-faContent(@fa-var-map-marker-question); }

Those phrases appear to be missing on the new version by accident (poor merge on my part potentially).

I'll get them added back into the next version.
 
Solution

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.

Back