Gad D Lord Gad D Lord - 8 months ago 43
jQuery Question

Change the icon of a jQuery UI button with own image

Currently I have the following jQuery UI 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?


Define a style yourself, like this:

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

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

  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.