[cXF] Navigation tab icons for custom tabs

[UnstucK]

Have you created your own navigation tab and want to add icon?​

Compatibility with XenForo: 2.2, 2.3

Have you created your own navigation tab and want to add icon?

Use inspect element in your browser and hover over your tab. For details check image below:

For that tab just add this code to your existing one (for example before the last } in above code):

Spoiler: XF: 2.3

[data-nav-id="membership"]:before {
       .m-faContent(@fa-var-star);
       color: #E6BB5C;
       padding-right: 5px;
   }

Spoiler: XF: 2.2

[data-nav-id="membership"]:before {
       .m-faBase();
       .m-faContent(@fa-var-star);
       color: #E6BB5C;
       padding-right: 5px;
   }

Do you want to have a different icon or its color for a selected tab?

Below it's a code example for Forums tab. Add this code to your extra.less and edit to suit your needs:

Spoiler: XF: 2.3

/* Selected tabs */
.p-navEl.is-selected {
   [data-nav-id="forums"]:before {
       .m-faContent(@fa-var-star);
       padding-right: 5px;
       color: #E6BB5C;
   }
}
/* Selected tabs for off-canvas (mobile) menu */
.offCanvasMenu--nav .offCanvasMenu-linkHolder.is-selected {
   [data-nav-id="forums"]:before {
       .m-faBase();
       .m-faContent(@fa-var-star);
       padding-right: 5px;
       color: #E6BB5C;
   }
}

Spoiler: XF: 2.2

/* Selected tabs */
.p-navEl.is-selected {
   [data-nav-id="forums"]:before {
       .m-faBase();
       .m-faContent(@fa-var-star);
       padding-right: 5px;
       color: #E6BB5C;
   }
}
/* Selected tabs for off-canvas (mobile) menu */
.offCanvasMenu--nav .offCanvasMenu-linkHolder.is-selected {
   [data-nav-id="forums"]:before {
       .m-faBase();
       .m-faContent(@fa-var-star);
       padding-right: 5px;
       color: #E6BB5C;
   }
}

Result:

XenForo is a commercial Internet forum software package written in PHP. It was developed by former vBulletin developers, and it is designed to enhance community engagement and provide forum owners with a powerful platform to build and manage their online communities.

 

Online indicator based on user ID

Discord Chatbox