Navigation icons in 2.3

[Pixeldust]

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:

Navigation icons

Set navigation icons

pixelexit.com

Screencap of the icons in my mobile nav:

The code I'm using:

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.

 

[Russ]

On this post:

2.3 Style Releases (beta)

We're excited to announce that our styles are now ready for XenForo 2.3! Sometime tomorrow, you'll receive an email when the update is ready or download. Our goal is to ensure that your upgrade process is as smooth as possible. While most of you will find these updates painless, please take...

pixelexit.com

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:

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.

 

[Pixeldust]

This works perfectly! Thank you so much for your help.

 

[Russ]

This works perfectly! Thank you so much for your help.

Just a FYI as well, a new documentation center is launching soon which is why that old code is referencing the 2.2 bit.

 

[anil]

Do you have something for the sub nav icons?

 

[Russ]

Do you have something for the sub nav icons?

You just need to add an extra class in the front. Instead of like this:

a[data-nav-id="searchForums"]:before {  .m-faContent(@fa-var-bolt); }

Do this:

.p-sectionLinks-list a[data-nav-id="searchForums"]:before {  .m-faContent(@fa-var-bolt); }

 

[anil]

You just need to add an extra class in the front. Instead of like this:

a[data-nav-id="searchForums"]:before {  .m-faContent(@fa-var-bolt); }

Do this:

.p-sectionLinks-list a[data-nav-id="searchForums"]:before {  .m-faContent(@fa-var-bolt); }

As always, excellent support. Worked perfectly. Thank you, Russ.

 

[anil]

You just need to add an extra class in the front. Instead of like this:

a[data-nav-id="searchForums"]:before {  .m-faContent(@fa-var-bolt); }

Do this:

.p-sectionLinks-list a[data-nav-id="searchForums"]:before {  .m-faContent(@fa-var-bolt); }

Apologies, one more quick question. for Brands on fontawesome, usually it starts with " fab fa-... " , how do i incorporate brands with this? I was trying to add socials to the sub nav also, like bluesky.

 

[Russ]

Apologies, one more quick question. for Brands on fontawesome, usually it starts with " fab fa-... " , how do i incorporate brands with this? I was trying to add socials to the sub nav also, like bluesky.

2.3 shouldn't require that, the problem is bluesky isn't actually part of the FA5 icon set, sadly. So this CSS wouldn't work. XenForo approaches the Bluesky icon in a unique manner, they allow for this code:

<xf:fa icon="fab fa-bluesky" />

but I don't think there's a CSS equivalent (you might be able to reach out to them to find out for sure but I don't think so).

So your options for the Bluesky icon would be to upload a Bluesky image and add CSS like so:

a[data-nav-id="searchForums"]:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background-image: url('https://example.com/bluesky-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

 

[Russ]

@anil

Follow up, it does work, you just need this code:

.m-faIcon(@fa-var-brands-bluesky);