Less For public navigations

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:
Back
Top