I have an star icon. I want to use this icon in an unknown number of colors.

Sometimes I need a red star, sometimes a purple star.

I could dynamically create images on the server with a web service.

What I'm curious about, is there any way to control the color of this icon without explicitly creating an image for every color I may need ?

I have an star icon. I want to use this icon in an unknown number of colors.

Sometimes I need a red star, sometimes a purple star.

I could dynamically create images on the server with a web service.

What I'm curious about, is there any way to control the color of this icon without explicitly creating an image for every color I may need ?

• javascript
• jquery
• html
• css

• 2 Perhaps you could make an icon with transparency and change the color of the background. – FishBasketGordo Commented Apr 5, 2013 at 17:05
• use a canvas object, or a transparent image and change the background colors. – Marc B Commented Apr 5, 2013 at 17:05

4 Answers 4

You should use glyphicons or some other type of icon-based font: http://twitter.github./bootstrap/base-css.html#icons

Here's an example of icon-based fonts in action: http://css-tricks./examples/IconFont/

I can think of three ways to do this.

1. Create a sprite sheet with all the different colors you need, and shift offsets to change colors. This is kinda cheating.
2. Dynamically generate the image using Canvas (ugh!)
3. Use SVG, which will respond to changes to the CSS similar to changing text display by changing the class on the DIV/SPAN

With SVG icons you can do whatever you want :)

Here's an example with the Raphael JS Library: http://raphaeljs./icons/

You could generate just 4 star images: 1 black, 1 red, 1 blue and 1 green (maybe 1 white too, if you have a non-white background). Then stack all of them and play with their opacity to obtain the color you want.