XF2 GUIDE Coloured Node Icons

How to change node icon colour to something like that?



This is a DIY step-by-step tutorial.


Before changing the code let's get prepared:

1. To change the category block header see this guide.
2. Be sure what type is your node you wish to change the icon for (Category, Forum, Link forum or Page).
3. If you don't know how to check node ID, please check this resource.

Change Forum node type icon

For Forum node type icon (read and unread) add this code to your extra.less template:
Code:
/* Coloured Node Icons */
.block.block--category.block--categoryX {
/* read icon */
.node--forum.node--read .node-icon i:before {
color: #e6cbe4;
text-shadow: none;
}
/* unread icon */
.node--forum.node--unread .node-icon i:before {
color: #9e5697;
text-shadow: none;
}
}
/**********/
Change X to your node ID.




To change also the subforum node type icon edit the above code to this:
Code:
/* Coloured Node Icons */
.block.block--category.block--categoryX {
/* read icon */
.node--forum.node--read .node-icon i:before, .subNodeLink.subNodeLink--forum:before {
color: #e6cbe4;
text-shadow: none;
}
/* unread icon */
.node--forum.node--unread .node-icon i:before, .subNodeLink.subNodeLink--forum.subNodeLink--unread:before {
color: #9e5697;
text-shadow: none;
}
}
/**********/
Result for subforum icon:





Change Category node type icon

Look steps above and edit the code to suit your needs. You can simply add this .node--category.node--read .node-icon i:before for read icon to above code or check the code below for better understanding:
Code:
/* Coloured Node Icons */
.block.block--category.block--categoryX {
/* read icon */
.node--forum.node-- read .node-icon i:before, .subNodeLink.subNodeLink--forum:before,
.node--category.node--read .node-icon i:before {
color: #e6cbe4;
text-shadow: none;
}
/* unread icon */
.node--forum.node-- u nread .node-icon i:before, .subNodeLink.subNodeLink--forum.subNodeLink--unread:before, .node--category.node--unread .node-icon i:before {
color: #9e5697;
text-shadow: none;
}
}
/**********/

Change Link forum node type icon

Look steps above and edit the code to suit your needs. You can simply add this .node--link .node-icon i:before for read icon to above code or check the code below for better understanding:
Code:
/* Coloured Node Icons */
.block.block--category.block--categoryX {
/* read icon */
.node--forum.node-- read .node-icon i:before, .subNodeLink.subNodeLink--forum:before,
.node--category.node--read .node-icon i:before, .node--link .node-icon i:before {
color: #e6cbe4;
text-shadow: none;
}
/* unread icon */
.node--forum.node-- u nread .node-icon i:before, .subNodeLink.subNodeLink--forum.subNodeLink--unread:before, .node--category.node--unread .node-icon i:before {
color: #9e5697;
text-shadow: none;
}
}
/**********/

Change Page node type icon

Look steps above and edit the code to suit your needs. You can simply add this .node--page .node-icon i:before for read icon to above code or check the code below for better understanding:
Code:
/* Coloured Node Icons */
.block.block--category.block--categoryX {
/* read icon */
.node--forum.node-- read .node-icon i:before, .subNodeLink.subNodeLink--forum:before,
.node--category.node--read .node-icon i:before, .node--link .node-icon i:before, .node--page .node-icon i:before {
color: #e6cbe4;
text-shadow: none;
}
/* unread icon */
.node--forum.node-- u nread .node-icon i:before, .subNodeLink.subNodeLink--forum.subNodeLink--unread:before, .node--category.node--unread .node-icon i:before {
color: #9e5697;
text-shadow: none;
}
}
/**********/
These are the basic steps. There, of course, may be specifics.