jQuery-UI : Specifying different Button Icon colors using only CSS classes

Doing this:

Results in

Specifying Button Icon colors using CSS only rather than using custom JavaScript
Specifying Button Icon colors using CSS only rather than using custom JavaScript

This tutorial demonstrates how changing the icon color can  be achieved.

The CSS

where the image is from the /<theme>/images/ui-icons……

specifying .ui-icon.blue targets only those tags which contain both classes.

To get these images:

  1. Go here: http://jqueryui.com/themeroller/ to the jQuery-UI theme roller utility
  2. In any of the sections, choose the desired icon color
  3. Download that theme, the images of the prescribed color will be there. Copy them as needed.

The Generic Reusable JavaScript

This script is necessary to enable the icon color to be specified using CSS classes.

That’s all there is to it,

Simply include the above JavaScript and CSS in your pages then specify the icon type and color using CSS classes.

Comments always welcome..

 

This is one of a few blogs on similar content

jQuery-UI : Changing the color of an icon
jQuery-UI : Applying an Icon to a button using CSS classes
jQuery-UI : Specifying different Button Icon colors using only CSS classes
jQuery-UI : change the color of a button using CSS classes