javascript - Is there a way to dynamically change the color of an icon? - Stack Overflow

admin管理员组

文章数量:1384760

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

Share Improve this question Follow asked Apr 5, 2013 at 17:03 BentOnCodingBentOnCoding 28.2k1414 gold badges6666 silver badges9393 bronze badges 2

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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.

本文标签： javascriptIs there a way to dynamically change the color of an iconStack Overflow