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

Question

是否可以使用自定义图标创建 jQueryUI 按钮，即：不属于 jQueryUI 提供的精灵图标的图标？

我正在为一组 3 个复选框使用 ButtonSet 功能，但需要一个比开箱即用的图标更具风格的图标...

Answer 1

用 CSS hack 解决了这个问题。

正常设置按钮，并为主图标提供下面定义的“错误”类

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

!important 覆盖背景图像的 ui-icon 定义。

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>