Question

Wondering if anyone knows a way to combat this shortcoming.

I use jQuery UI buttons for all of my button actions and the stock icons are a tad boring and I much prefer using an icon set from the twitter bootstrap.

before I go any further here is how I’m styling the buttons:

$('#juiBtnLocked').button({
    disabled: true,
    icons: {
        primary: "ui-icon-locked"
    }
});

it seems that the icons property only accepts jquery ui css styles, which I don’t know why that should matter as the value provided is the full css name from the css file so logically it should technically accept ANY css rule given.

my question is, has anyone successfully got another css sprite code to work with the buttons?

to answer the question on why I don’t just use the twitter buttons, its because that’s breaking the jquery ui buttons and I use too much of the jquery ui toolkit to ditch it. If twitters dialog was more robust, I’d skim the jquery ui a bit, but its too limited for my needs.

Answer 1

You could simply override the styling for that class using CSS.

.ui-icon-locked {
    background: url(myimage.png) no-repeat 0 0;
}

ui-icon-locked is not a CSS rule. It is just a hook for a HTML class. The default rules for the styles (including the icons) are stored in jquery-ui.css in the directory of the theme you are using.

For example, in the jquery-ui.css of the base theme of 1.9.1 you can find these:

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
...
.ui-icon-locked { background-position: -192px -96px; }