To change Font Awesome icons in subsections, just add such code to
Now let’s take a look at the example of the finished code, how can we change the icon for another subsection 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 node(s):
extra.less
.
Less:
.m-subNodeLink-icons(@subNode-id; @readIcons; @unreadIcons: false; @faType: false) {
.subNodeLink[href$=".@{subNode-id}/"] {
&:before {
& when (@faType = Brands) {
.m-faBase('Brands');
}
.subNodeLink--forum&,
.subNodeLink--category& {
content: "\@{readIcons}";
& when not (@unreadIcons = false) {
.subNodeLink--unread& {
content: "\@{unreadIcons}";
}
}
}
.subNodeLink--page& {
content: "\@{unreadIcons}";
}
.subNodeLink--link& {
content: "\@{unreadIcons}";
}
}
}
}
.m-subNodeLink-icons(103; f297; f296; Brands);
Everything is quite simple, we do not need to duplicate this whole large section of code, just one line is enough.
.m-subNodeLink-icons (@subNode-id; @readIcons; @unreadIcons: false; @faType: false)
is a variable that accepts four parameters, separated by semicolons.- Subnode id - @subNode-id;
- Unicode Font Awesome icons for read subnodes - @readIcons;
- Unicode Font Awesome icons for unread subnodes - @unreadIcons; this parameter is optional
- Icon Type Font Awesome - @faType; this parameter is optional, by default it is Pro
- Subnode id - 103
- Unicode Font Awesome Icons for subnodes read - f297
- Unicode Font Awesome icons for unread subnodes - 296, this parameter is optional
- Font Awesome Icon Type - Brands
Just duplicate this line (as much as you need):
.m-subNodeLink-icons (103; f297; f296; Brands);
Under the existing one.
And slightly change for the desired node(s):
Less:
.m-subNodeLink-icons(103; f297; f296; Brands);
.m-subNodeLink-icons(104; f425; false; Brands);
.m-subNodeLink-icons(102; f645; false);