Custom node icons

Set custom icons

Support Forums

Public support forums for active customers

Documentation

Read up on the basics of our styles in our documentation area

Bug Reports

Report those bugs so we can squash them!

Ticket Support

Need help in private? View or create a support ticket

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 -> [XB] XenBase Framework -> Check: Design mode, 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!