jqueryui themeroller

Question

I'm learning about the Framework Icons in jQuery UI.

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

produces an icon of a minus sign inside a circle.
Using the ThemeRoller Firefox Bookmarklet, I was able to change the color of the icon to red (to make it look like a delete button).

Q: How can I make one jQueryUI icon be red and another one another color?

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

I'd like to make this one green.

Answer 1

You can't do this, at least not in the context of ThemeRoller. Themeroller uses one sprite image for this...a large image that contains all the Icons.

You can make another theme, same it's spritemap image to your images folder, and go into your jQuery UI CSS and change the .ui-icon-circle-plus background-image property.

It should look like this:

.ui-icon-circle-plus { background-position: 0 -192px; }

It would need to look something like this:

.ui-icon-circle-plus { }
 background-image: url(RedIcons.png);
 background-position: 0 -192px; 
}

You can look at the .ui-icon styles for the image it's currently using.

Answer 2

Use the ui-state-... classes to change the state of the element with the icon. You'll need to design your theme so that items in different states (highlight,hover,active,error,default) have different colors.

<span class="ui-icon ui-icon-circle-plus ui-state-highlight"></span>

I would recommend against using the states this way (just to change colors, that is). I'd use the states semantically and let the icons render as needed to be consistent with the state. If I specifically needed red/green icons, I'd generate those icons specifically as images and simply use them directly instead of trying to design the theme to get different color choices just for those icons.

For what it's worth, I think the FamFamFam Silk icons integrate pretty well with jQuery UI.