How to use jquery error icons (red)
I have such a gap
<span class="ui-icon ui-icon-circle-close"></span> which displays a close color icon similar to the theme color.
But you want to use the red icons available for this error. Which jquery class should be used for this.
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 an image containing red jquery icons. But I can’t use it.
The span class defines only the icon.
Set "ui-state-error" for your parent to change the icon color to red.
Check out the example icon here: http://jqueryui.com/themeroller/ (bottom right sidebar).
When I tried to use such icons in front of text, I got problems with line breaks and poor alignment between the icon and the text.
To avoid the icon appearing, to add a line break, use
<span class="ui-icon ui-icon-name" style="display: inline-block;"></span> To get better text alignment, 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> If you need only an icon with a different color, and not the entire square, as here: http://jqueryui.com/themeroller/ , bottom right
add this 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 depends on the color you want.
And in html:
<div class="ui-icon-red ui-icon-circle-zoomin"> <span class="ui-icon ui-icon-alert"></span> must do it.
Edited because I think I have now found the correct class.
Apply ui-state-error to the layer containing the icon (s) and remove the default background and border:
CSS
.error-state-icon.ui-state-error { border:none; background:none; } HTML:
<div class="ui-state-error error-state-icon"> <span class='ui-icon ui-icon-info'></span> </div>