我能为jQueryUI按钮设置自定义图标吗？

Question

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

我正在为3个复选框组使用ButtonSet功能，但需要比默认提供的更具风格的图标...

- Boycs

Answer 1

通过CSS技巧解决了问题。

按照正常方式设置按钮，并将主要图标赋予下面定义的"Error"类。

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

!important可以覆盖ui-icon的background-image定义。

- Boycs

---

那不是黑客行为，只是一个很好的覆盖重写。 - chrismarx

!important 可以说是一种 hack。绝对不是一个应该过度依赖的东西。在像这样的情况下，它可能还可以接受。 - Derek Adair

Answer 2

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

1. 我不需要使用"!important"来覆盖样式
2. 我需要设置按钮的background-position属性（否则按钮外部的背景图像可能会被显示出来）
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>

- Ben