Change the icon of a jQuery UI button with own image

Question

Currently I have the following jQuery UI button:

$('#button').button(
  {
    label: 'Test',
    icons: {primary: 'ui-icon-circle-plus', secondary: null}
  }
);

I wish to use own image for the button called 'custom.png'.

How I can achieve that?

Solution 1

Define a style yourself, like this:

.ui-icon-custom { background-image: url(images/custom.png); }

Then just use it when calling .button(), like this:

$('#button').button({
  label: 'Test',
  icons: {primary: 'ui-icon-custom', secondary: null}
});

This assumes that your custom icon is in the images folder beneath your CSS...the same place as the jQuery UI icon map typically is. When the icon's created it gets a class like this: class="ui-icon ui-icon-custom", and that ui-icon class looks like this (maybe a different image, depending on theme):

.ui-icon { 
  width: 16px; 
  height: 16px; 
  background-image: url(images/ui-icons_222222_256x240.png); 
}

So in your style you're just overriding that background-image, if needed change the width, height, etc.

Solution 2

Take a look at Nick Craver's comment. I tried his answer it exactly as is, but it still didn't help me. The issue (I assume) was that the ui-icon-custom class was at the end of the class list, and didn't seem to override it to original ui-icon class background image.

What I did to get it to work was add !important to the end of the icon css like so

.ui-icon-custom { background-image: url(images/custom.png) !important; }

You might have to change the height and width properties, but this worked for me.

Solution 3

Maybe I'm missing something in the OP, but this works for me without much problem. You can define the button as a DIV and put a table inside it. No overriding of css and you can still use both jquery defined icons and your own custom sized icon. You can also place the icon anywhere around the text (top, left, right, etc).

$(document).ready(function()
{
    $('#btn').button();
});

---

<div id='btn'>
<table>
<tr>
<td><img src='images/custom.png' width="24" height="24" /></td>
<td>Search</td>
</tr>
</table>
</div>

Solution 4

search the jquery ui css file for the ui-icon-circle-plus class then copy it for your own image.

Solution 5

If only an image to display at the button, without label or text, I do this :

$('#button').button();

to replace this image element to become a button :

<img src="images/custom.png" width="28" height="28" id="button">

But if you prefer following with label or text, tschlarm explanation above is better.

View more solutions