Change svg icon color in embedded widget

Design help Custom code
1

I have embedded a booking widget from lodgify to enable users to directly check availability of an appartment. Everything works just fine except for when viewing the page, all svg icons are displayed in white, thus making them almost invisible.

Any help is very much appreciated since I’m anything but a code-pro

Password for the website is keinermagklimt

Thanks!!

Here is my site Read-Only: [LINK]

2

Hello @Benjamin_M, so I inspected your website and the embeded element has the svg with a class of icon, so all you have to do is add the css for the color of that class.

Screen Shot 2022-04-11 at 2.57.54 PM
Screen Shot 2022-04-11 at 2.57.54 PM746×292 27.5 KB

the color can be whatever you want I just used #d0021b but you can use whatever. I hope this helps!

3

Works perfectly! Thank you so much. You just made my day :smiley:

1 Like
4

So immediately another issue came up. The icon on the button now has to have another color than the rest.

Would you happen to have a solution to this too? :grimacing:

5

Hey @Benjamin_M that is probably a little harder try something like this:

button > .icon {
  color: your-color;
}

I hope this helps!

6

this seems to override all the other icons as well.
thanks for trying anyway!

1 Like