Custom Icons in Menus

This topic has 7 replies, 2 voices, and was last updated 2 years, 4 months ago by Luke Nielsen.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
August 5, 2022 at 3:26 pm #395779

axxo
Participant

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.

August 5, 2022 at 3:55 pm #395783

Luke Nielsen
Keymaster

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

August 5, 2022 at 5:10 pm #395800

axxo
Participant

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.

August 5, 2022 at 5:25 pm #395804

Luke Nielsen
Keymaster

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

August 5, 2022 at 6:03 pm #395816

axxo
Participant

Hi,

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

Best
-a

August 8, 2022 at 10:08 am #396059
Luke Nielsen
Keymaster
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
August 8, 2022 at 10:37 am #396060

axxo
Participant

Works like a charm! Thank you so much.

Best
-a

August 8, 2022 at 11:25 am #396073

Luke Nielsen
Keymaster

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