I really need help to fix this. Why does the fill color not change my icon?
.payment-method-icons {
fill: #636363 !important;
}
Changing inside the block editor also does nothing. Why?
Hi @hebhansen,
Can you share a link to the live site? I can then inspect the icons and see where the hard coded color values are, if there are any.
Thanks!
Can you share a link to the live site? I can then inspect the icons and see where the hard coded color values are, if there are any.
Hello again @hebhansen, just following up on my comment above.
Best,
Nick
Now I can. It came live yesterday. If you check footer, you will see the Seba card being of another color (my svg). The others are included in Kadense Icon block and those I can style…. I have almost 10 more like Seba card, so I really need to be able to color them. Thx
Hey Nick
Any news on this. I am moving online, and need my payment methods in footer. I have 10 ish more, I would like to add, but pointless if I can’t color them to match. Thx
Ah, I see. The icon is actually an image wrapped in <svg> markup.
<svg xmlns="http://www.w3.org/2000/svg" xmlns-xlink="http://www.w3.org/1999/xlink" width="2405" height="1871" viewBox="0 0 2405 1871">
<image id="Background_-_Backup_copy" data-name="Background - Backup copy" width="2404" height="1870" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAACWQAAAdOCAYAAABoP7MPAAAgAElEQVR4nOzdedCuZ13Y8e85Wcl2EkkgkEATAomBR[...trimmed the rest for simplicity]</image>
</svg>
Therefore, there unfortunately is no way to style this image with CSS. If you can convert the original png to an svg, then you would be able to change the color of the icon either in the plugin or with custom CSS.
As an example, this is what one of the Kadence icons look like, which are straight svgs.
<svg viewBox="0 0 448 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M448 256.2c0-87.2-99.6-153.3-219.8-153.3-18.8 0-37.3 1.6-55.3 4.8-11.1-10.5-24.2-20-38-27.4C61.2 44.2 0 79.4 0 79.4s56.9 47.1 47.6 88.3c-52.3 52.3-52.5 124.1 0 176.6C56.9 385.6 0 432.6 0 432.6s61.2 35.2 134.9-.8c13.8-7.5 26.9-16.9 38-27.4 18 3.2 36.5 4.8 55.3 4.8 120.3-.1 219.8-65.8 219.8-153zm-219.7 124c-23.7 0-46.3-2.8-67.3-7.8-21.3 25.8-68.1 61.7-113.6 50.1 14.8-16 36.7-43.1 32-87.6-27.3-21.4-43.6-48.7-43.6-78.5 0-68.4 86.2-123.9 192.5-123.9S420.8 188 420.8 256.4c0 68.3-86.2 123.8-192.5 123.8zm25.6-123.9c0 14.2-11.5 25.8-25.6 25.8-14.1 0-25.6-11.5-25.6-25.8 0-14.2 11.5-25.8 25.6-25.8 14.1 0 25.6 11.6 25.6 25.8zm88.9 0c0 14.2-11.4 25.8-25.6 25.8-14.1 0-25.6-11.5-25.6-25.8 0-14.2 11.4-25.8 25.6-25.8 14.1 0 25.6 11.6 25.6 25.8zm-177.9 0c0 14.2-11.4 25.8-25.6 25.8-14.1 0-25.6-11.5-25.6-25.8 0-14.2 11.4-25.8 25.6-25.8 14.2 0 25.6 11.6 25.6 25.8z"></path>
</svg>
Best,
Nick
Your right. File is uncool. I just tested with a downloaded Font Awesome Icon and that works. So I am doing smth wrong in photoshop. What is it I need to do, when saving an SVG? Why is an svg not an svg??? Please can someone advise reg. photoshop?
Now I switched all to Black for a quick and dirty solution. That just doen’t cut it in the long run…
-
This reply was modified 1 year, 3 months ago by
hebhansen.
I have not used Photoshop in years, so unfortunately I have no idea. But you could use an online service to convert a png to an svg. There are many options that come up when Googling.
Use Adobe Illustrator to create SVGs instead. You can probably import the PSD-file into Illustrator, make sure it’s a vector image and export to SVG.
Another option is to use a converter (PNG to SVG), either one of the free online or a command line tool (if you’re on Linux).
Though, Adobe-created SVGs usually needs some cleanup/optimization. Either do it yourself in a text editor, or use an online tool.
I am saving as SVG! So why is it not an svg? I do not need another program.
I am saving as SVG! So why is it not an svg?
I guess it technically is an svg, but it’s not one that can be modified by CSS.
I assume that you are taking a png file, opening it in Photoshop, and then exporting as an svg. Is this correct?
If so, I think Photoshop just encodes the png and wraps it in svg markup. You need a tool that will actually convert the png to vectors. I just quickly tried Adobe Express, and it worked pretty well. You do need to have an Adobe account (free), but you might already have one if you have Photoshop.
I hope that helps.
Nick
@hebhansen I think maybe the issue is that you are saving a rasterized image as an SVG. Then the image will just be embedded in the SVG. You need to convert it to a vector image before saving as SVG. That is possible to do with Photoshop as well, now that I googled it, I just use Illustrator by default myself.
