XF 1.4 Font Awesome in navbar

[AscalonCZ]

Hi, how to add Font Awesome to new tabs in Navbar?

For example via this mod: Custom Tabs i made new tabs forexamlpe ./pages/games ./pages/translations etc.

What i need to edit?

.navTabs .publicTabs .navTab .navLink:before
{
   color: #FFF;
   font-family: FontAwesome;
   font-weight: normal;
   margin-right: 5px;
}
.navTabs .navTab.forums .navLink:before
{
   content: "\f0e6";
}

 

[Dylan V]

Hi,

The following method does not necessarily assign an unique id to custom tabs, but also do not touch the HTML code. Replace your current code with mine:

.navTabs .publicTabs .navTab .navLink:before
{
      color: #FFF;
      font-family: FontAwesome;
      font-weight: normal;
      margin-right: 5px;
}

.navTabs .publicTabs .navTab:nth-child(2) .navLink:before
{
      content: "\f0e6";
}

The number in "nth-child(2)" matches the tab located in the second position of your navigation.

Example in image:



If I want, for example, to add an icon to the tab "Test #2", I'll add this:

.navTabs .publicTabs .navTab:nth-child(5) .navLink:before
{
      content: "\f0e6";
}

This tab is in fifth position, so I put "5".

 

[AscalonCZ]

Excellent, it works! Thank you very much for your help.

 

[Russ]

While the above css is using nth-child(#), if you change the order at all, add or remove links it would link those icons to different ones.

So to kind of "future proof" it:

That add-on adds classes to each tab: custom-tab-1, custom-tab-2 ect. You can use this to target specific ones:

.navTabs .publicTabs .navTab .navLink:before
{
  color: #FFF;
  font-family: FontAwesome;
  font-weight: normal;
  margin-right: 5px;
}
.navTabs .navTab.home .navLink:before {  content: "\f015"; }
.navTabs .navTab.forums .navLink:before {  content: "\f0e6"; }
.navTabs .navTab.resources .navLink:before {  content: "\f008"; }
.navTabs .navTab.members .navLink:before {  content: "\f0c0"; }
.navTabs .navTab.custom-tab-2 .navLink:before {  content: "\f0c0"; }
.navTabs .navTab.custom-tab-3 .navLink:before {  content: "\f0c0"; }