• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 Font Awesome in navbar

#1
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?

Code:
.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

Well-known member
#2
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:
Code:
.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:

Screenshot_1.png

If I want, for example, to add an icon to the tab "Test #2", I'll add this:
Code:
.navTabs .publicTabs .navTab:nth-child(5) .navLink:before
{
      content: "\f0e6";
}
This tab is in fifth position, so I put "5".

Screenshot_2.png
 

Russ

Well-known member
#4
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:

Code:
.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"; }