Hello readers, today we are going to add icons on nodes in xenforo just like below:

Icons can significantly enhance your forum look. The default chat icons look too dull and unhappening, while colorful icon matching your forum can give a nice touch to the forum.
Check the below forums with node icons:


Doesn’t it look better than the default?
Lets Start!
For this, the first thing we need is the NODE ID. Hover or click on any node and check the URL:

As you see the suffix, here ‘5’ is the node id and we going to need this to add an icon
Now move to Xenforo Admin Panel > Appearance > Templates and search for extra.less.
Now add the below code:
.node--idxx .node-icon i:before {
content: "\f8bc";
}
replace idxx with your node id and replace \f8bc with your desired font awesome icon.

Click Save when done.
Visit the forum to check the result.

Alternatively, you can also use an Addon for this purpose, read here: Add icons in nodes in xenforo with addons