Custom Icons in Menus

Hi there

Is there any way to use custom SVG icons in the menus? We’ve build our own iconsets and can only find the support for Font Awesome library trying to add icons in WordPress menus.

Many thanks
-a

Attachments:

You must be logged in to view attached files.

Hello,

Judging by your screenshot, these icons you can change directly, navigate to WoodMart -> Header builder -> edit the “Text/HTML” element and in the “Text” tab change the link to the icon that is from Dashboard -> Media.

https://prnt.sc/Rrx5_THVAAnF

https://prnt.sc/UuxurLgqb2ou

If you have your own images so first of all upload them to the Dashboard -> Media and then enter the link to the appropriate “Text/HTML” element in the Header builder.

If there’s anything else we can do, please get in touch.

Kind Regards

Hi Luke

Thank you so much for your super-fast response. I’m impressed how good the support is from Woodmart.

Maybe my example was exactly the wrong one 😉 I was more referring to a menu in WordPress (see attached screenshot). There it’s mentioned to use icons from FontAwesome library. However, we would like to use there our custom SVG icons. Is this somehow possible via CSS?

Many thanks
-a

Attachments:

You must be logged in to view attached files.

Hello,

I think it’s possible by using custom CSS code, in order to check it, please upload appropriate SVG images to the Dashboard -> Media and provide your site admin access to the private area so I can try to do it.

I await your response.

Kind Regards

Hi,

Many thanks. You’ll find the relevant information below.

Best
-a

Hello,

Please enter the below code to the “Custom CSS for desktop” area that is in Theme Settings -> Custom CSS.

.wd-header-nav .menu-item-8419 .woodmart-nav-link:before {
    content: ' ';
    position: absolute;
    background-image: url('http://www.feavr.com/wp-content/uploads/2022/08/faq.svg');
    background-repeat: no-repeat;
    background-size: 17px 17px;
    height: 17px;
    width: 17px;
}

.wd-header-nav .menu-item-8419 .nav-link-text {
    margin-left: 21px;
}

In the meantime, please feel free to ask any questions you may have!

Kind Regards

Works like a charm! Thank you so much.

Best
-a

Hello,

Glad that everything is sorted out.

Always remember that you can reach out to us with any questions you may have.

We wish you a splendid day!

Kind Regards

[Author]

Posts