XF2 Tutorials [cXF] Navigation tab icons for custom tabs

[XFdownloadStore]

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: