使用自己的图像更改 jQuery UI 按钮的图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3224537/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change the icon of a jQuery UI button with own image
提问by Ivelin Nikolaev
Currently I have the following jQuery UI button:
目前我有以下 jQuery UI 按钮：
$('#button').button(
{
label: 'Test',
icons: {primary: 'ui-icon-circle-plus', secondary: null}
}
);
I wish to use own image for the button called 'custom.png'.
我希望为名为“custom.png”的按钮使用自己的图像。
How I can achieve that?
我怎么能做到这一点？
回答by Jim Gilmartin
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-customclass was at the end of the class list, and didn't seem to override it to original ui-iconclass background image.
看看 Nick Craver 的评论。我完全按照原样尝试了他的回答，但它仍然没有帮助我。问题（我假设）是ui-icon-custom该类位于类列表的末尾，并且似乎没有将其覆盖为原始ui-icon类背景图像。
What I did to get it to work was add !important to the end of the icon css like so
为了让它工作，我所做的是将 !important 添加到图标 css 的末尾，就像这样
.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.
您可能需要更改高度和宽度属性，但这对我有用。
回答by Nick Craver
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').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-iconclass looks like this (maybe a different image, depending on theme):
这假设您的自定义图标位于 CSS 下方的图像文件夹中……与 jQuery UI 图标映射通常位于同一位置。创建图标后，它会得到一个这样的类：class="ui-icon ui-icon-custom"，并且ui-icon该类看起来像这样（可能是不同的图像，具体取决于主题）：
.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.
所以在你的风格中，你只是覆盖了那个background-image，如果需要的话改变宽度、高度等。
回答by tschlarm
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).
也许我在 OP 中遗漏了一些东西，但这对我来说没有太大问题。您可以将按钮定义为 DIV 并在其中放置一个表格。没有覆盖 css，您仍然可以同时使用 jquery 定义的图标和您自己的自定义大小的图标。您还可以将图标放置在文本周围的任何位置（顶部、左侧、右侧等）。
$(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>
回答by PutihTua
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.
但是，如果您更喜欢使用标签或文本进行跟踪，则上面的 tschlarm 解释会更好。
回答by Paul Creasey
search the jquery ui css file for the ui-icon-circle-plusclass then copy it for your own image.
在 jquery ui css 文件中搜索ui-icon-circle-plus该类，然后将其复制为您自己的图像。
回答by jftremblay
Check this link:
检查此链接：
http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile
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.
在“数据图标”中，只需放置您想要的任何内容，jquery 将为您创建该类。
回答by MaikHo
easy or easy
容易或容易
#bildwechseln {
background-image: url('../images/my-png/bild.png');
width: 140px;
height: 140px;}
<button id="bildwechseln"></button>
Greetings from Germany
来自德国的问候
