How to use jquery error(red) icons

Question

I have a span like this

<span class="ui-icon ui-icon-circle-close"></span>

which gives display a close icon of color same as the theme color.

But want to use the red icons which are available for the error. Which jquery class should I use for that.

I found a class in Jquery css

.ui-state-error .ui-icon, .ui-state-error-text .ui-icon 
{background-image: url(images/ui-icons_cd0a0a_256x240.png); }

this image is the image which contains jquery red icons . But I cant use it.

Answer 1

The span's class only determines the icon.

Set the "ui-state-error" on its parent to change the icon's color to red.

Check the icon example here: http://jqueryui.com/themeroller/ (the bottom of the right sidebar).

Answer 2

When trying to use such icons before text, I got line break problems and a bad alignment between the icon and the text.

To avoid the icon to add a line break, use

<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>

To get a better alignment for the text, use the following

<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>
<span style="display: inline-block; overflow: hidden;">Your text</span>

Answer 3

If You want just icon with other color, not whole box as is the example here: http://jqueryui.com/themeroller/, in bottom right conner

add this to anywhere in Your .css file:

.ui-icon-red { width: 16px; height: 16px; background-image: url(images/ui-icons_red_256x240.png); }

The name and path of the file are depend of the color what You wanted.

And in html:

<div class="ui-icon-red ui-icon-circle-zoomin">