jQuery-UI : Applying an Icon to a button using CSS classes

This tutorial simply demonstrates a generic reusable JavaScript snipped which will allow you to specify Button Icon’s using only CSS classes. I.e. no need to apply Icons using JS anymore.

Adding icons to buttons using CSS only
Adding icons to buttons using CSS classes in the same way as using icons in general

So, as above, a button will get the key icon just by specifying the classes ui-icon ui-icon-key .

The Reusable JavaScript Snippet(s)

Note of course, that this only applies primary icons. Modification is required to apply secondary icons.

That’s it.

Simply include the above JavaScript in your pages then use CSS classes on buttons’s* the same way as for normal jQuery-UI icons.

*Note that the use of th eword button refers to:

input[type=”button”], input[type=”submit”], input[type=”reset”], or <button>

 

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