Navigation Icons

[Davey]

At the moment i have navigation icons by code in my extra.less.
I have just come across this in the Nova style properties.

How is this implemented? I click inline and nothing shows.
Thanks.

 

[Russ]

You can view the screenshots of each option here:

https://pixelexit.com/threads/2-0-10-new-items.6676/

Down in the post a bit, if you remove your CSS and choose an option do they load? Essentially we use pure CSS.

 

[Davey]

Managed to get it working now. I had left a bit of code in there.
One issue is that the dropdown arrow on the forums tab is out of line if icons are set to show above.

Also how do we now go about changing the Premium tab icon to a custom one?
If i add to extra.less as before just for that tab and others i need custom, will that overwrite the default?

.p-navEl [data-nav-id="premium"]:before{font-family:FontAwesome;content:"\f234";color:#b0ff00;padding-right:5px}

Ta

 

[Russ]

You only need to use:

.XenBase .p-nav-list .p-navEl a.p-navEl-link[data-nav-id="premium"]:before{content:"\f234";}

I'll take a look at the arrow a little later today.

 

[Davey]

You only need to use:

.p-navEl [data-nav-id="premium"]:before{content:"\f234";}

That doesn't seem to overwrite the default.
Ive done it directly in xb_header.less for now.

 

[Russ]

That doesn't seem to overwrite the default.
Ive done it directly in xb_header.less for now.

Just to follow up on this, I've adjusted my post. I'd considering using my CSS inside extra.less as we will be modifying xb_header.less in the future so it will show as outdated for you.

 

[Davey]

Thats working fine now. Cheers for that.