Add Font Awesome icons to the navigation

Add Font Awesome icons to the navigation

SyTry

Well-known member
SyTry submitted a new resource:

Add Font Awesome icons to the navigation - Add Font Awesome

Hi,

Today I share a tutorial under xenForo 2.0 : Add Font Awesome icons to the navigation !

Go in your panel here :
  • /admin.php?navigation/
Then select the element of your choice :
View attachment 164307

Here is the default code I use :
HTML:
<i class="fa fa-newspaper-o fa-large fa-fixed-width" style="padding-right:3px;"></i>

Screen :
View attachment 164308

View attachment 164309

If you have question, ask me !

Read more about this resource...
 

Chris D

XenForo developer
Staff member
The navigation titles aren't directly editable in normal cases. They're only editable with debug mode enabled. When debug mode is enabled, you'd be editing the "Master language" version of the phrase. This will be reset when XF or the add-on it belongs to is upgraded.

Each navigation tab has an ID. Once you know that ID, you can find the phrase associated with it. Its phrase title will be in the format of nav.<navigation_id>. Just edit the phrases in any of your active languages (but not the master language).
 

SyTry

Well-known member
The navigation titles aren't directly editable in normal cases. They're only editable with debug mode enabled. When debug mode is enabled, you'd be editing the "Master language" version of the phrase. This will be reset when XF or the add-on it belongs to is upgraded.

Each navigation tab has an ID. Once you know that ID, you can find the phrase associated with it. Its phrase title will be in the format of nav.<navigation_id>. Just edit the phrases in any of your active languages (but not the master language).
Thank you for the tip but this tutorial is only to add the icon, not to translate the expression: it's good ?
 

Chris D

XenForo developer
Staff member
Most people will not be able to follow your instructions (we prevent that field being changed in normal usage) and even if they can, they will lose their icons every time they upgrade.

You have to use the phrase system to add icons to navigation tabs.
 

SyTry

Well-known member
Most people will not be able to follow your instructions (we prevent that field being changed in normal usage) and even if they can, they will lose their icons every time they upgrade.

You have to use the phrase system to add icons to navigation tabs.
Thanks for your help. I updated my tutorial by following your directions! :)
 

bobs409

Active member
I just tried this but because I have added a few extra tabs in that area, if I add these icons it makes the bar scroll right & left. Would be nice if you only have the standard tabs but no good in my case.
 

abdfahim

Well-known member
Each navigation tab has an ID. Once you know that ID, you can find the phrase associated with it. Its phrase title will be in the format of nav.<navigation_id>. Just edit the phrases in any of your active languages (but not the master language).
Hi Chris,

I would like to add an icon to the Nav item related to my addon by default.

Under that circumstance, it's fine to edit Master Language, right? I don't see any other option.

Note, this nav.mynewrout variable was automatically created once I defined the route.

Screen Shot 2019-09-11 at 8.29.06 am.png
 

OUTL4W

Active member
how would this be achieved if I wanted to use "Brands" for the icons? as I get a square image for any brand icon I try to use.
 

OUTL4W

Active member
You just have to use the correct HTML for it and it should work.
I was actually using this code from here via extra.less

and in order for brands to show I figured I needed to use this:
Code:
.p-navEl a:before {
    .m-faBase('Brands');
    display: inline-block;
    text-align: center;
    margin-right:5px;
    border-radius:30px;
    line-height:normal;
}

but when using the "brands" function...the brand icon showed but all the other icons disappeared.
 

Chris D

XenForo developer
Staff member
That’s because that CSS targets every navigation tab so it assumes you wa t to use brand icons for everything.

You need to try to target a specific navigation tab there should be a unique class or attribute to select a specific tab.
 
Top