我可以为 jQueryUI 按钮设置自定义图标吗

Question

是否可以创建一个带有自定义图标的 jQueryUI 按钮，即：一个图标不属于 jQueryUI 提供的精灵图标的一部分？？？

我正在将 ButtonSet 功能用于一组 3 个复选框，但需要一个比现成提供的图标更加风格化的图标...

Answer 1

与CSS破解工作了。

设置按钮按正常，得到伯图标下方

中定义的“错误”类

.Error
{
    background-image: url('Images/Icons/16/Error.png') !important;
}

为背景图像的！重要覆盖的UI的图标定义

Answer 2

我对我的一个按钮采用了这种方法，我发现了一些有趣的事情：

1. 我不需要使用“！important”覆盖
2. 我需要为我的按钮设置背景位置（否则我认为背景显示在按钮之外）
3. 看起来你也可以在 jQueryUI 主图标名称中放入任何你喜欢的东西 - 它只需要一些东西作为占位符。

对于我的用途，我最终得到：

JavaScript：

jQuery(function() {
    jQuery('#share-button').button({
        icons: { primary: "icons/share" }
    });

});

CSS：

#share-button > span.ui-icon {
    background-image: url(icons/share.png);
    background-position:0px 3px;}

HTML：

<button id='share-button'>Share</button>