Gad D Lord Gad D Lord - 3 months ago 9
jQuery Question

Change the icon of a jQuery UI button with own image

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?

Answer

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.