Less For public navigations

kick

Administrator
Staff member
Joined
Apr 7, 2020
Messages
186
Reaction score
227
Points
43
1589285428594.png

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.
 
Last edited:
Top