Add an image to individual navigation tabs

Add an image to individual navigation tabs


XenForo moderator
Staff member
Brogan submitted a new resource:

Add an image to individual navigation tabs (version 1.0) - Each tab can have a different image applied.

Another simple bit of CSS which will add an image to the navigation bar for each tab, in front of the tab text/name.

You need to know the class name for each tab.
The default ones are: home, forums, members, help.
If you are using the Nodes As Tabs add-on, each tab will have a class name such as nodetab38.

You can use one of the browser inspection tools to identify the tab classes.

For each tab, you will need to add CSS similar to the following to...
Read more about this resource...


Well-known member
Won't it be simple to use just background-image? Just a bit of padding on navTab + a background-image.
Pseudo-elements are not a cross-browser feature, I think it is better to use css2 properties.
Brogan or anyone else.
I really would appreciate the code for just showing the icon without tab text, therefore the icon be linkable.
Best regards!