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

Question

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

我将ButtonSet功能用于一组3个复选框，但需要一个比开箱即用的更加风格化的图标......

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>