Less For public navigations

kick · May 12, 2020

To add Font Awesome icons to navigation, just add such code to extra.less.

Less:

.navigation-icons (@nav-id; @fa-uid; @fa-type: false; @fa-size: false; @color: false) {
    .p-navEl-link,
    .menu-linkRow {
            &[data-nav-id="@{nav-id}"]:before {
                padding-right: 4px;
                & when (@fa-type = false) {
                    .m-faBase();
                }
                & when (@fa-type = 'Brands') {
                    .m-faBase('Brands');
                }
                & when (isnumber(@fa-size)) {
                    font-size: @fa-size;
                }
                & when (iscolor(@color)) {
                    color: @color;
                }
                content: "\@{fa-uid}";
            }
    }
}

// Navigation icons
.navigation-icons (home, f015);
.navigation-icons (forums, f129);
.navigation-icons (xfrm, f129);

Add ready-made code to the example, how can we add an icon for another created tab or two.
We need only one copy of the code.
.navigation-icons (home, f046);
.navigation-icons (@nav-id; @fa-uid; @faType: false; @fa-size: false; @color: false); - it is a variable that takes four parameters, separated by commas.

Tab or navigation item id - @nav-id;
Unicode Icons Font Awesome - @fa-uid;
Icon Type Font Awesome - @fa-type; this parameter is optional, by default it is Pro
The size of the icon is @fa-size; this parameter is optional, by default it is 14px
Icon color - @color; this parameter is optional

In our example, this.

Tab or navigation item id - home
Unicode Icons Font Awesome - f046
Icon size - this parameter is optional, therefore missing
Icon color - this parameter is optional, therefore missing

Suppose we need to add an icon for another created tab or two.
Just duplicate this line: .navigation-icons(home, f046);
Under the existing one.