Can I set a Custom Icon for a jQueryUI Button

jquery-ui icons jquery-ui-button
Boycs picture Boycs · May 14, 2010 · Viewed 8.5k times · Source

Is it possible to create a jQueryUI Button with a custom icon, ie: an icon that is not part of the sprite icons that are provided with jQueryUI???

I am using the ButtonSet functionality for a group of 3 checkboxes but need a more stylised icon than what is provided out of the box...

Answer

Boycs picture Boycs · May 14, 2010

Worked it out with a CSS hack.

Setup the button as per normal and give the primary icon the "Error" class defined below

.Error
{
    background-image: url('Images/Icons/16/Error.png') !important;
}

The !important overrides the ui-icon definition for background-image.

Related questions

How To Specify (Override) JQuery Icon Color

I've been making good use of the jQuery icons in my web app, but have come to a point where I would like to use a color that I'm not able to achieve by default. I'm currently using the "State …

Read More
How do I add a custom icon to a standard jQuery UI theme?

It is easy to use one of the icons available from the standard icon set: $("#myButton").button({icons: {primary: "ui-icon-locked"}}); But what if I want to add one of my own icons that is not part of the framework icon …

Read More
Replacing the Close icon for a JQueryUI Dialog box

After extensive searching on this topic, I haven't been able to find an answer, so hopefully someone can help me with this issue. I have a relatively basic dialog box: $("#dialog-search").dialog({ resizable: false, height:dimensionData.height, width: dimensionData.width, …

Read More