使用自己的图像更改jqueryui按钮的图标

自己定义一个样式,如下所示:

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

那就打电话的时候用吧 .button() ,如下所示:

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

class="ui-icon ui-icon-custom" ,然后呢 ui-icon 类看起来像这样(可能是不同的图像,取决于主题):

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

所以在你的风格里,你就是在超越它 background-image ,如果需要,改变宽度、高度等。

看看尼克·克雷弗的评论。我试着按原样回答他,但还是没用。问题(我想)是 ui-icon-custom ui-icon

我做了什么让它工作是添加!重要的是要结束css这样的图标

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

也许我在行动中遗漏了什么,但这对我来说没什么问题。您可以将按钮定义为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>

在jqueryuicss文件中搜索 ui-icon-circle-plus

如果按钮上只显示一个图像,没有标签或文本,我会这样做:

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

要将此图像元素替换为按钮:

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

但如果你喜欢下面的标签或文字,tschlarm解释上面是更好的。

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>

在“数据图标”中,只需放置您想要的任何内容,jquery就会为您创建类。

容易还是容易

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

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

来自德国的问候