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.

List of available Font Awesome icons: https://fontawesome.com/v5/search


Change all icons to the same icon
To make it so every node uses the same icon, head to Style properties -> Node/forum list. Look for the "Read node icon" and "Unread node icon". You can define a custom Font Awesome icon here. Do not include the prefix fa-.

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 { .m-faContent(@fa-var-sign-in);}
This will give node2 a unique icon. Here's a cheatsheet for all of the Font Awesome names. With 2.3 you'll need to use the icon name, replacing "sign-in" in the above example.

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 { .m-faContent(@fa-var-sign-in);}

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!
Back