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

button, icons, jquery-ui

Solution

I could also recommend:

.ui-button .ui-icon.your-own-custom-class {
    background-image: url(your-path-to-normal-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

.ui-button.ui-state-hover .ui-icon.your-own-custom-class {
    background-image: url(your-path-to-highlighted-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

then just type in the JS code:

        jQuery('selector-to-your-button').button({
        text: false,
        icons: {
            primary: "you-own-cusom-class"   // Custom icon
        }});

It worked for me and hope it works for you too!

Problem

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 set? I thought it would be as easy as giving it your own CSS class with a background image, but that doesn't work: ``` .fw-button-edit { background-image: url(edit.png); } ``` Any suggestions?

Original source