XenForo ships out with Font Awesome Node Icons by default and no longer use images. If you want to use images see the next section.

Custom Font Awesome Node Icons

You'll need to place custom CSS inside your extra.less template. We've made this really easy, go to Style Properties -> Node/forum list -> Check: Show node ID's, it will show the following on the forum index now:



This only shows to admins

Placing the following code inside your extra.less template you can find this by going to Appearance -> Templates -> extra.less:

.node.node--id2 .node-icon i:before { content: "\f075";}

This will give node2 a unique icon. Here's a cheatsheet for all of the Font Awesome codes.

Want to place the same icon for each category? Simply use the category ID found in the category bar with this code:

.block.block--category1 .node-icon i:before { content: "\f075";}

Custom Image Node Icons

Image node icons can get a little complicated in setup so if you have specific questions just post in our support forums or open a ticket.

This is a generic code to get a sprite showing and reducing the image by 50% for higher resolution displays.


.block-body
{
    .node--unread .node-icon i
    {
        background-position: right center;
    }
    .node-icon
    {
        padding-right: 10px;
        width: 60px;
        i
        {
        background: url(styles/default/xenforo/node-sprite.png) no-repeat left center;
        background-size: auto 40px;
        width: 40px;
        height: 40px;
        &:before
        {
            opacity: 0 !important;
        }
        }
    }
    .node--id2 .node-icon i
    {
        background: url(styles/default/xenforo/node2-icon.png) no-repeat center center;
    }

}
		

This will set an image on every node, then apply a custom image to in this case, node--id2.
As I mentioned there are a ton of different image based node icons you could do so if you get stuck just write us!