Add Font Awesome icons to navigation tabs (for 3rd party add-ons)

[BassMan]

Sticky Navigation supports official XenForo navigation tabs and resources. This guide will explain how to add FA icon to a 3rd party add-on that creates his own navigation tab.

Open EXTRA.css template and add codes you can see below (to customize it read further).

How can I change icon?
Below you'll find predefined codes, but if you wish to change the icon just find (example):

content: "\f1b2";

... and change the icon code number (in that case f1b2) to suit your needs. A cheatsheet for FA icons can be found here.


Predefined codes for:

Donations

/* START - Font Awesome Donations Icon */
<xen:if is="@sn_navtabicons">
.navTabs .navTab.donations .navLink:before {
    display: block !important;
    font-family: FontAwesome;
    position: absolute;
    top: 0 px;
    left: 9px;
    border-left: none;
    content: "\f1b2";
    font-size: 12px;
    font-weight: normal;
    /* color: #FFF; */
}
.navTabs .navTab.donations.selected .navLink:before {
    color: #FFF;
    top: 1px;
}
.navTabs .navTab.donations:hover .navLink:before {
    color: #FFF;
}
.navTabs .navTab.donations .navLink {
    padding-left: 28px;
}

<xen:if is="@sn_navtabsicons_mobile">
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
  .navTabs .navTab.donations .navLink:before
  {
    display: none !important;
  }
  .navTabs .navTab.donations .navLink
  {
    padding-left: 15px;
}
}
</xen:if>
</xen:if>
</xen:if>
/* END - Font Awesome Donations Icon */

Nodes As Tabs

If you're using Nodes As Tabs add-on you can also add FA icons my inspecting your tab and look for a nodetab number. Replace XYZ with your nodetab number (there are 5 of them to replace).

/* START - Font Awesome Nodes As Tabs XYZ Icon */
<xen:if is="@sn_navtabicons">
.navTabs .navTab.nodetabXYZ .navLink:before {
    display: block !important;
    font-family: FontAwesome;
    position: absolute;
    top: 0 px;
    left: 9px;
    border-left: none;
    content: "\f1b2";
    font-size: 12px;
    font-weight: normal;
    /* color: #FFF; */
}
.navTabs .navTab.nodetabXYZ.selected .navLink:before {
    color: #FFF;
    top: 1px;
}
.navTabs .navTab.nodetabXYZ:hover .navLink:before {
    color: #FFF;
}
.navTabs .navTab.nodetabXYZ .navLink {
    padding-left: 28px;
}

<xen:if is="@sn_navtabsicons_mobile">
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
  .navTabs .navTab.nodetabXYZ .navLink:before
  {
    display: none !important;
  }
  .navTabs .navTab.nodetabXYZ .navLink
  {
    padding-left: 15px;
}
}
</xen:if>
</xen:if>
</xen:if>
/* END - Font Awesome Nodes As Tabs XYZ Icon */

Showcase

/* START - Font Awesome Showcase Icon */
<xen:if is="@sn_navtabicons">
.navTabs .navTab.showcase .navLink:before {
    display: block !important;
    font-family: FontAwesome;
    position: absolute;
    top: 0 px;
    left: 9px;
    border-left: none;
    content: "\f123";
    font-size: 12px;
    font-weight: normal;
    /* color: #FFF; */
}
.navTabs .navTab.showcase.selected .navLink:before {
    color: #FFF;
    top: 1px;
}
.navTabs .navTab.showcase:hover .navLink:before {
    color: #FFF;
}
.navTabs .navTab.showcase .navLink {
    padding-left: 28px;
}

<xen:if is="@sn_navtabsicons_mobile">
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
  .navTabs .navTab.showcase .navLink:before
  {
    display: none !important;
  }
  .navTabs .navTab.showcase .navLink
  {
    padding-left: 15px;
}
}
</xen:if>
</xen:if>
</xen:if>
/* END - Font Awesome Showcase Icon */

TaigaChat

/* START - Font Awesome TaigaChat Icon */
<xen:if is="@sn_navtabicons">
.navTabs .navTab.taigachat .navLink:before {
    display: block !important;
    font-family: FontAwesome;
    position: absolute;
    top: 0 px;
    left: 9px;
    border-left: none;
    content: "\f1d7";
    font-size: 12px;
    font-weight: normal;
    /* color: #FFF; */
}
.navTabs .navTab.taigachat.selected .navLink:before {
    color: #FFF;
    top: 1px;
}
.navTabs .navTab.taigachat:hover .navLink:before {
    color: #FFF;
}
.navTabs .navTab.taigachat .navLink {
    padding-left: 28px;
}

<xen:if is="@sn_navtabsicons_mobile">
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
  .navTabs .navTab.taigachat .navLink:before
  {
    display: none !important;
  }
  .navTabs .navTab.taigachat .navLink
  {
    padding-left: 15px;
}
}
</xen:if>
</xen:if>
</xen:if>
/* END - Font Awesome TaigaChat Icon */

XenProduct

/* START - Font Awesome XenProduct Icon */
<xen:if is="@sn_navtabicons">
.navTabs .navTab.xenproduct .navLink:before {
    display: block !important;
    font-family: FontAwesome;
    position: absolute;
    top: 0 px;
    left: 9px;
    border-left: none;
    content: "\f1b2";
    font-size: 12px;
    font-weight: normal;
    /* color: #FFF; */
}
.navTabs .navTab.xenproduct.selected .navLink:before {
    color: #FFF;
    top: 1px;
}
.navTabs .navTab.xenproduct:hover .navLink:before {
    color: #FFF;
}
.navTabs .navTab.xenproduct .navLink {
    padding-left: 28px;
}

<xen:if is="@sn_navtabsicons_mobile">
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
  .navTabs .navTab.xenproduct .navLink:before
  {
    display: none !important;
  }
  .navTabs .navTab.xenproduct .navLink
  {
    padding-left: 15px;
}
}
</xen:if>
</xen:if>
</xen:if>
/* END - Font Awesome XenProduct Icon */

I have an add-on that is not listed here. How can I add an icon for that?

Open EXTRA.css template and add this code:

Add your tab class

Change each word 'CLASS' with your tab class.

/* START - Font Awesome CLASS Icon */
<xen:if is="@sn_navtabicons">
.navTabs .navTab.CLASS .navLink:before {
    display: block !important;
    font-family: FontAwesome;
    position: absolute;
    top: 0 px;
    left: 9px;
    border-left: none;
    content: "\f1b2";
    font-size: 12px;
    font-weight: normal;
    /* color: #FFF; */
}
.navTabs .navTab.CLASS.selected .navLink:before {
    color: #FFF;
    top: 1px;
}
.navTabs .navTab.CLASS:hover .navLink:before {
    color: #FFF;
}
.navTabs .navTab.CLASS .navLink {
    padding-left: 28px;
}

<xen:if is="@sn_navtabsicons_mobile">
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
  .navTabs .navTab.CLASS .navLink:before
  {
    display: none !important;
  }
  .navTabs .navTab.CLASS .navLink
  {
    padding-left: 15px;
}
}
</xen:if>
</xen:if>
</xen:if>
/* END - Font Awesome CLASS Icon */

Requirements: Sticky Navigation

 

[prototype22]

how to add icons for extra navTab?

 

[BassMan]

how to add icons for extra navTab?

Forum url would be very helpful.

 

[prototype22]

Unfortunately, the forum does not go to the Internet.
It is based on the local network.

 

[BassMan]

Then press F12 when you're in your browser (example when in Firefox).

After that click on this symbol in new window that has opened:

You don't have permission to view attachments. Attachments are hidden.

After you clicked on a symbol like in previous picture you go to your tab an click on it once. I'll show you what happened if you click on Forums tab. Click on Forums tab and check the developer console for navTab class like here:

You don't have permission to view attachments. Attachments are hidden.

The word after navTab is the word you're looking for. Replace this word with the red one in the code from first post.

 

[prototype22]

The Sticky Navigation [extra navTabs] no such parameters

You don't have permission to view attachments. Attachments are hidden.

 

[BassMan]

Oh, for sticky. I'll need to update this one. Thank you for noticing.

 

[BassMan]

@prototype22
Upgrade Sticky Navigation to latest version 3.7.1. I've added some classes so you can customize it like it's mentioned above. Classes are navTab1, navTab2 and navTab3.

 

[prototype22]

Thank you for such prompt decision