XenForo Simple Custom Node Icons on XenForo [Tutorial|

[CR LEAKS]

Step 1 :

• You can skip it if you know node numbers. (Inspect element on Icon)

If you know the subcategory or node number, skip this section

Step 2 :

• Make Sure you upload icons to server size (32x32) & Add to Extra.less >> Save

Save and prepare the images in 32x32 size, then put the above codes in the above template Extra.less

.node--id5 .node-icon i {
display: none;
}
.node--id5 .node-icon {
background: url('styles/default/xenforo/xenforo-favicon.png');
width:auto;
background-repeat: no-repeat;
background-position: center;
}

Step 3 :

• If You want multiple nodes you can add as many as you want for example

The following code will display a large number of nodes

.node--id2 .node-icon i {
display: none;
}
.node--id2 .node-icon {
background: url('styles/default/xenforo/xenforo-favicon.png');
width:auto;
background-repeat: no-repeat;
background-position: center;
}
.node--id3 .node-icon i {
display: none;
}
.node--id3 .node-icon {
background: url('styles/default/xenforo/xenforo-favicon.png');
width:auto;
background-repeat: no-repeat;
background-position: center;
}

Step 4 :

• Notes: You can aslo customize nodes depending on read and unread sections for example

Note: Note that you can even divide nodes into read and unread sections

.node--id2.node--depth2.node--forum.node--read  .node-icon {
background: url('styles/default/xenforo/xenforo-favicon.png');
width:auto;
background-repeat: no-repeat;
background-position: center;
}
.node--id2.node--depth2.node--forum.node--unread  .node-icon {
background: url('styles/default/xenforo/xenforo-different.png');
width:auto;
background-repeat: no-repeat;
background-position: center;
}