Displaying jquery themeroller icons in colors

Question

H all,

I am using jquery themeroller alert icon. I want this icon to be displayed in different colors. For example display this icon in red color in error message and yellow for warning message. Below is the default icon.

<span class="ui-icon ui-icon-alert"></span>

Is it possible to add colors to Jquery icons ?

Answer 1

You can change the icon's color and pretty much everything else using theme roller like so:

http://tinyurl.com/cjdquub

Answer 2

You can build up your styled icon-set frame using theme roller or other softwares, then specify different background-image URL to different css class according to your needs.

For example:

red color <span class="ui-icon ui-icon-alert red"></span>
<br><br>
blue color <span class="ui-icon ui-icon-alert blue"></span>

Css:

.ui-icon.red { background-image: url(http://code.jquery.com/ui/1.9.1/themes/base//images/ui-icons_cd0a0a_256x240.png); }
.ui-icon.blue { background-image: url(http://rhizosphere.googlecode.com/hg-history/e546f1a44825e2e1568de9d5bb87d3f2b1f41acd/src/stylesheets/blue/images/ui-icons_6391de_256x240.png); }

So the core jQuery UI css is the same, you simply override specific attribute.

Here is a working fiddle: http://jsfiddle.net/rrbn3/