Add icons before links in off canvas mobile menu

Hello,

There is only one way to add icons to the mobile menu and that is to use custom CSS code. Enter the below CSS code into the “Global Custom CSS” area that is situated in Theme Settings -> Custom CSS.

.mobile-nav .menu-item-8456 .woodmart-nav-link:before {
    content: '\f274';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
}

.mobile-nav .menu-item-9557 .woodmart-nav-link:before {
    content: '\f274';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
}

.mobile-nav .menu-item-8429 .woodmart-nav-link:before {
    content: '\f274';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
}

.mobile-nav .menu-item-8401 .woodmart-nav-link:before {
    content: '\f274';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
}

.mobile-nav .menu-item-10050 .woodmart-nav-link:before {
    content: '\f274';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
}

.mobile-nav .menu-item-8428 .woodmart-nav-link:before {
    content: '\f274';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
}

In the “content” attribute you can change your icon using Unicode from the “Font Awesome” service (https://fontawesome.com/). Also, make sure you have the “Font Awesome library” option enabled in Theme Settings -> Performance -> Fonts & Icons.

https://gyazo.com/3ec9b920d1a87aa097b13e1cc5747804

If you have any more questions or come across any other issue, let me know, I’ll be happy to help.

Have a great day.

Kind Regards

• This reply was modified 3 years, 7 months ago by Luke Nielsen.