Custom Node Icons

[Russ]

Custom Font Awesome 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.

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 code:

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

inside your extra.less template will give the node--id2 (In the screenshot above XenBase Releases) a unique Node icon. You can find the https://fontawesome.com/v4.7.0/cheatsheet/ full icon list here.

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!