jquery ui button custom icons

Question

It is easy to add one of the icons available as part of the UI 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 set? I thought it would be as easy as giving it your own CSS class with a background image, but that doesn't work. Any suggestions?

.fw-button-edit
{
    background-image: url(edit.png);
}

Answer 1

I believe the reason why his won't work is because you're icon's background-image property is being overridden by the jQuery UI default sprite icon background image. The style in question is:

.ui-state-default .ui-icon {
    background-image: url("images/ui-icons_888888_256x240.png");
}

This has higher specificity than your .fw-button-edit selector, thus overriding the background-image proerty. Since they use sprites, the .ui-icon-locked ruleset only contains the background-position needed to get the sprite image's position. I believe using this would work:

.ui-button .ui-icon.fw-button-edit {
    background-image: url(edit.png);
}

Or something else with enough specificity. Find out more about CSS specificity here: http://reference.sitepoint.com/css/specificity