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

Question

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?

Answer 1

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!

Answer 2

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

Answer 3

This is based on the info provided by Yi Jiang and Panayiotis above, and the jquery ui button sample code:

As I was migrating an earlier JSP application that had a toolbar with images per button, I wanted to have the image inside the button declaration itself rather than create a separate class for each toolbar button.

<div id="toolbarDocs" class="tableCaptionBox">
    <strong>Checked Item Actions: </strong>

    <button id="btnOpenDocs" data-img="<s:url value="/images/multi.png"/>">Open Documents</button>
    <button id="btnEmailDocs" data-img="<s:url value="/images/email.png"/>">Attach to Email</button>
</div>

Of course there were plenty more buttons than just the two above. The s tag above is a struts2 tag, but you could just replace it with any URL

        <button id="btnOpenDocs" data-img="/images/multi.png">Open Documents</button>

The below script looks for the attribute data-img from the button tag, and then sets that as the background image for the button.

It temporarily sets ui-icon-bullet (any arbitrary existing style) which then gets changed later.

This class defines the temporary style (better to add further selectors for the specific toolbar if you plan to use this, so that the rest of your page remains unaffected). The actual image will be replaced by the Javascript below:

button.ui-button .ui-icon {
    background-image: url(blank.png);
    width: 0;
    height: 0; 
}

and the following Javascript:

 $(document).ready(function () {
    $("#toolbarDocs button").each(
          function() { 
            $(this).button(
              { text: $(this).attr('data-img').length === 0? true: false, // display label for no image
               icons: { primary: "ui-icon-bullet"  }
              }).css('background-image', "url(" + $(this).attr('data-img') +")")
               .css('background-repeat', 'no-repeat');
            });
  });