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

Question

目前我有以下jQuery UI按钮:

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

我希望将自己的图像用于名为'custom.png'的按钮.

我怎么能做到这一点？

Answer 1

看看尼克克拉弗的评论.我完全按原样尝试了他的答案,但它仍然没有帮助我.问题(我假设)是ui-icon-custom该类位于类列表的末尾,并且似乎没有将其覆盖到原始ui-icon类背景图像.

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

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

您可能需要更改高度和宽度属性,但这对我有用.

Answer 2

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

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

然后在调用时使用它.button(),如下所示:

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

这假设您的自定义图标位于CSS下方的images文件夹中...与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); 
}

所以在你的风格中background-image,如果需要改变宽度,高度等,你只需要覆盖它.

Answer 3

也许我在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>