Change the icon of a jQuery UI button with own ima

问题:

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?

回答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.

回答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.

回答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>

回答4:

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

回答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.

回答6:

Check this link:

http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile

.bouton-image { background: #004963; width: 80px; }
.ui-icon-wifi {
   width: 80px;
   height: 80px;
   background-color: #004963;
   background-image: url(../images/icones/icone_wifi_ispsm_mobile.png);
   background-position: 40% 40%;
}

<a title="" class="bouton-image" data-role="button" data-icon="wifi" data-iconpos="notext" data-inline="true"></a>

In "data-icon" just put whatever you want and jquery will create the class for you.

回答7:

easy or easy

#bildwechseln {
background-image: url('../images/my-png/bild.png');
width: 140px;
height: 140px;}

<button id="bildwechseln"></button>

Greetings from Germany