CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BentOnCoding
BentOnCoding

Reputation: 28208

Is there a way to dynamically change the color of an icon?

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 ?

Upvotes: 0

Views: 4928

Answers (4)

ulentini
ulentini

Reputation: 2412

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.

Upvotes: 1

PaulProgrammer
PaulProgrammer

Reputation: 17660

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

Upvotes: 2

Philippe Boissonneault
Philippe Boissonneault

Reputation: 3949

With SVG icons you can do whatever you want :)

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

Upvotes: 1

chrislondon
chrislondon

Reputation: 12031

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

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

Upvotes: 3

Related Questions