Less for custom subforum icons (categories, pages, links)

kick

Administrator
Staff member
Joined
Apr 7, 2020
Messages
168
Reaction score
180
Points
43
To change Font Awesome icons in subsections, just add such code to 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);
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.
.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
In our example, this.
  • 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
Suppose we need to change the icon for another subsection or several.
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);
 
Top