Changing color FAQ – How to unlock color?

  • Resolved hebhansen

    (@hebhansen)


    11 months ago

    Hey Nick

    This plugin and block is just brilliant. Thx. In your faq you state:

    Why is my icon not changing color?

    The Icon Block includes controls for the icon’s color and background. However, if your SVG icon has hard-coded color/fill values, the plugin will respect those instead of any applied custom colors.

    I am kind of new to playing with svg on WP, since it is so restrictive. However, a year back, I designed some icons, that are missing everywhere such as payment methods etc. I did fix the upload, so I have the icons in media library. I have also managed to add the icon to my site. But color is not changing in your block.

    I get the faq comment, so excuse me for asking. I reallise it is outside the scope of the block, but how do I not hard code color? I will be making mine in PS, so if you know the answer, it sure is a great help to get this workflow smooth… finally!

    Thx

Viewing 12 replies - 1 through 12 (of 12 total)
  • Thread Starter hebhansen

    (@hebhansen)

    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?

    Plugin Author Nick Diego

    (@ndiego)

    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!

    Plugin Author Nick Diego

    (@ndiego)

    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

    Thread Starter hebhansen

    (@hebhansen)

    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

    Thread Starter hebhansen

    (@hebhansen)

    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

    Plugin Author Nick Diego

    (@ndiego)

    Ah, I see. The icon is actually an image wrapped in <svg> markup. 

    <svg xmlns="https://www.w3.org/2000/svg" xmlns-xlink="https://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="https://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

    Thread Starter hebhansen

    (@hebhansen)

    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 10 months, 2 weeks ago by hebhansen.
    Plugin Author Nick Diego

    (@ndiego)

    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.

    Thread Starter hebhansen

    (@hebhansen)

    I am saving as SVG! So why is it not an svg? I do not need another program.

    Plugin Author Nick Diego

    (@ndiego)

    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.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Changing color FAQ – How to unlock color?’ is closed to new replies.

Tags