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

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

Status
Not open for further replies.

BassMan

Staff member
Administrator
May 18, 2015
463
161
2,072
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):
Code:
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:
Code:
/* 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 */
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).
Rich (BB code):
/* 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 */
Code:
/* 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 */
Code:
/* 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 */
Code:
/* 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:
Change each word 'CLASS' with your tab class.
Rich (BB code):
/* 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
 
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:

upload_2015-12-14_14-38-41.png

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:

upload_2015-12-14_14-41-58.png

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

Attachments

    You don't have permission to view attachments. Attachments are hidden.
Status
Not open for further replies.

Welcome to customizeXF

We are running default XenForo style customized by cXF
Registration is free!

Search forums

Back
Top