Less for images as custom forum icons (categories), pages, links

To change the Font Awesome icons for sections on images, just add such extra code to extra.less.

.m-nodeImgIcons(@node-id; @unreadImage; @readImage: false; @height: 40px; @width: 40px) {
    .node--id@{node-id} {
        .node-icon i {
            &:before {
                content: none;
            }

            .node--read& {
                & when (@readImage = false) {
                    -webkit-filter: grayscale(100%);
                    filter: grayscale(100%);
                }
            }

            .node--forum&,
            .node--category& {
                & when (isurl(@unreadImage)) {
                    background: @unreadImage no-repeat;
                }
                & when (ispixel(@height)), (ispixel(@width)) {
                    height: @height;
                    width: @width;
                }

                .node--read& when (isurl(@readImage)) {
                    background: @readImage no-repeat;
                }
            }

            .node--page& {
                & when (isurl(@unreadImage)) {
                    background: @unreadImage no-repeat;
                }
                & when (ispixel(@height)), (ispixel(@width)) {
                    height: @height;
                    width: @width;
                }
            }

            .node--link& {
                & when (isurl(@unreadImage)) {
                    background: @unreadImage no-repeat;
                }
                & when (ispixel(@height)), (ispixel(@width)) {
                    height: @height;
                    width: @width;
                }
            }
        }
    }
}
.m-nodeImgIcons(2; url("styles/xenforo/forum_new.png"); url("styles/xenforo/forum_old.png"); 42px; 42px);

Now let's look at the example of the finished code, how do we change the icon for another section or several.
Everything is quite simple, we do not need to duplicate this whole large section of code, just one line is enough.
.m-nodeImgIcons(2; url("styles/xenforo/forum_new.png"); url("styles/xenforo/forum_old.png"); 42px; 42px);
.m-nodeImgIcons (@ node-id; @unreadImage; @readImage: false; @height: 40px; @width: 40px)); is a variable that takes five parameters, separated by semicolons.

• Node id - @node-id;
• Link to image of unread forums - @unreadImage;
• Link to the image of the read forums - @readImage; if not specified, then the grayscale filter will be used, with a value of 100%
• Height - @height; this parameter has a default value, but you can change it to your own if you wish
• Width - @width; this parameter has a default value, but you can change it to your own if you wish

In our example, this.

• Node id - 2
• Link to image of unread forums - url("styles/xenforo/forum_new.png")
• The link to the image of the read forums is url ("styles/xenforo/forum_old.png"), if not specified, then the grayscale filter will be used, with a value of 100%
• Height - 42px, this parameter has a default value, but you can change it to your own if you wish
• Width - 42px, this parameter has a default value, but you can change it to your own if you wish

Suppose we need to change the icon for another section or several.
Just duplicate this line (as much as you need):
.m-nodeImgIcons (2; url ("styles/xenforo/forum_new.png"); url ("styles/xenforo/forum_old.png"); 42px; 42px);
Under the existing one.
And slightly change for the desired section (s):

.m-nodeImgIcons(2; url("styles/xenforo/forum_new.png"); url("styles/xenforo/forum_old.png"); 42px; 42px);
.m-nodeImgIcons(3; url("styles/xenforo/forum_two_new.png"); url("styles/xenforo/forum_two_old.png"));
.m-nodeImgIcons(4; url("styles/xenforo/forum_two_new.png"));