Custom node icons:​

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:


nodeicons1.png

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:

Code:
.node.node--id2 .node-body .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:

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

Custom Image Node Icons​

This is a very basic version of custom node images.

Code:
.block-body
{
    .node--unread .node-body .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;
        width: 40px;
        height: 40px;
        &:before
        {
            opacity: 0 !important;
        }
        }
    }
}
The following is a little more advanced.
This is a generic code to get a sprite showing and reducing the image by 50% for higher resolution displays. It also shows how to get a unique icon on a specific forum.
nodeicons2.png

nodeicons3.png


Code:
.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!