2

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 ?

Lolly
  • 34,250
  • 42
  • 115
  • 150

2 Answers2

1

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

http://tinyurl.com/cjdquub

mfreitas
  • 2,395
  • 3
  • 29
  • 42
1

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/

Irvin Dominin
  • 30,819
  • 9
  • 77
  • 111