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

The solution at this link worked great for me: http://www.jquerybyexample.net/2012/09/how-to-assign-custom-image-to-jquery-ui-button.html

$(document).ready(function() {
    $("#btnClose")
    .text("")
    .append("<img height='100' src='logo.png' width='100' />")
    .button();
});​

Answer 2

in css

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

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

in HTML

<button type="button" class="ui-button ui-widget ui-corner-all">
    <span class="custom-class"></span> CAPTION TEXT
</button>

in JavaScript

$("selector").button({
    icons: { primary: "custom-class" }
});

Answer 3

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 4

// HTML

<div id="radioSet" style="margin-top:4px; margin-left:130px;" class="radio">
      <input type="radio" id="apple" name="radioSet"  value="1"><label for="apple">Apple</label>
      <input type="radio" id="mango" name="radioSet" value="2"><label for="mango">Mango</label>
</div>


// JQUERY

// Function to remove the old default Jquery UI Span and add our custom image tag

    function AddIconToJQueryUIButton(controlForId)
    {
        $("label[for='"+ controlForId + "'] > span:first").remove();
        $("label[for='"+ controlForId + "']")
        .prepend("<img position='fixed' class='ui-button-icon-primary ui-icon' src='/assets/images/" + controlForId + ".png' style=' height: 16px; width: 16px;' />");

    }

// We have to call the custom setting to happen after document loads so that Jquery UI controls will be there in place

   // Set icons on buttons. pass ids of radio buttons
   $(document).ready(function () {
                 AddIconToJQueryUIButton('apple');   
                 AddIconToJQueryUIButton('mango');   
    });

   // call Jquery UI api to set the default icon and later you can change it        
    $( "#apple" ).button({ icons: { primary: "ui-icon-gear", secondary: null } });
    $( "#mango" ).button({ icons: { primary: "ui-icon-gear", secondary: null } });

Answer 5

Building on msanjay answer I extended this to work for custom icons for both jquery ui buttons and radio buttons as well:

<div id="toolbar">
    <button id="btn1" data-img="/images/bla1.png">X</button>
    <span id="radioBtns">
      <input type="radio" id="radio1" name="radName" data-mode="scroll" data-img="Images/bla2.png"><label for="radio1">S</label>
      <input type="radio" id="radio2" name="radName" data-mode="pan" data-img="Images/bla3.png"><label for="radio2">P</label>
    </span>
</div>    

$('#btn1').button();
$('#radioBtns').buttonset();

loadIconsOnButtons('toolbar');

function loadIconsOnButtons(divName) {
    $("#" + divName + " input,#" + divName + "  button").each(function() {
      var iconUrl = $(this).attr('data-img');
      if (iconUrl) {
        $(this).button({
          text: false,
          icons: {
            primary: "ui-icon-blank"
          }
        });
        var imageElem, htmlType = $(this).prop('tagName');
        if (htmlType==='BUTTON') imageElem=$(this);
        if (htmlType==='INPUT') imageElem=$("#" + divName + " [for='" + $(this).attr('id') + "']");
        if (imageElem) imageElem.css('background-image', "url(" + iconUrl + ")").css('background-repeat', 'no-repeat');
      }
    });
}

Answer 6

My solution to add custom icons to JQuery UI (using sprites):

CSS:

.icon-example {
    background-position: 0 0;
}

.ui-state-default .ui-icon.custom {
    background-image: url(icons.png);
}

.icon-example defines position of icon in custom icons file. .ui-icon.custom defines the file with custom icons.

Note: You may need to define other JQuery UI classes (like .ui-state-hover) as well.

JavaScript:

$("selector").button({
    icons: { primary: "custom icon-example" }
});

Answer 7

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');
            });
  });

Answer 8

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