To change the Font Awesome icons for sections on images, just add such extra code to extra.less.
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.
Just duplicate this line (as much as you need):
Under the existing one.
And slightly change for the desired section (s):
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);
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
- 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
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):
Code:
.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"));