jQuery-UI : Changing the color of an icon

This quick tutorial demonstrates how to change the color of jQuery UI icons.

e.g.

changing the color of jQuery-UI icons
different colored jQuery-UI icons

will result in red and blue icons respectively

The HTML

(Same as above)

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.

It’s as simple as that……

 

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

1 Comment