CSS Color for Image

[intodesign]

Hello,

I have a png image that i’ve saved from Photoshop CS3,
I want to use it like an icon in CSS so i could change the color from the CSS,

What is the best way to do that?

[Paulie_D]

You cannot change the color of an image (generally) using CSS although without knowing what the image is and how you want to use it it’s hard to help.

You might be able to convert it to an icon-font in which case it would be treated as just like text and then you can use any color you like but for a single image/icon that seem like overkill.

However, if you are determined to do that you would probably need an SVG image and a service like icomoon.io

[intodesign]

But if i use SVG, can i change the color with the CSS?

[Paulie_D]

If you are using an icon-font it is treated just like text and responds to the color css property.

If you are using an actual SVG element then you can control the individual sections/elements that make up that whole SVG element with CSS.

If, however, you are using an SVG image element then the answer is, basically, no…you cannot change the color…no more than than you could with a PNG or JPG.

As I said, it’s unusual to use an icon-font for a single image…perhaps you might give us a clue as to what it is you are trying to do…and why?

[intodesign]

Thanks,

I told you exactly what i want to do,
I have an image and i would like to load it into the HTML page,
when i’m using the css i want to be able the change the image color with the css like the way you said (icon-font) but i wanted to know if i can do that without creating a font.

[Paulie_D]

I told you exactly what i want to do,

And…I’ve told you that you can’t without creating an icon-font.

I will grant that there are experimental properties that might help here but they are only supported by ultra-modern browsers.

Seriously, I’m trying to help you but you don’t seem to grasp that you can’t expect CSS to magically do whatever you want.

I guess I need to understand why, having created the this PNG in CS3 (which is very old by the way), you need to change the color.

Will you be using it a lot in many different colors on the site?

Could you not just change the color in CS3 and export different color versions?

[Paulie_D]

@TheDoc.

Yes, if it’s an SVG element

I covered that earlier on but at the moment, as far as I can tell, it’s a PNG (or maybe or an SVG image, although I don’t thing PS CS3 can handle those). in which case, it won’t work at least AFAIK.

[intodesign]

OK, Thanks

[Author]

Posts