Add Font Awesome icons to the navigation

[SyTry]

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 :

<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]

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]

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]

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]

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!

 

[boulager29]

Commenter sur change les îcon?
How do we change the icons? @SyTry

 

[SyTry]

Commenter sur change les îcon?
How do we change the icons? @SyTry

With this site : fontawesome.io/icons/
Just modifie ICON :

<i class="fa fa-ICON fa-large fa-fixed-width" style="padding-right:3px;"></i>

 

[bobs409]

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.

 

[TerryP]

@SyTry Will you be offering this as an extension like you have the others?

 

[SyTry]

@SyTry Will you be offering this as an extension like you have the others?

I don't know, why not later!

 

[abdfahim]

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.

 

[OUTL4W]

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.

 

[Chris D]

You just have to use the correct HTML for it and it should work.

 

[OUTL4W]

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

xenForo 2.1.x Navtab menu FontAwesome 5 use of [Deleted]

Emre submitted a new resource: xenForo 2.1.x Navtab menu FontAwesome 5 use of - xenForo 2.1.x Navtab menu FontAwesome 5 use of xenForo 2.1.x Navtab menu FontAwesome 5 use of 🥰 extra.less You just need to add the following codes to your template /* EMRE yıldırmaz - xenForo 2.1.x Navtab menu...

xenforo.com

and in order for brands to show I figured I needed to use this:

.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]

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.