如何制作仅自定义图标的 jQuery UI 按钮小部件？

Question

我正在尝试用 jQuery UI 来替代其他 RIA 技术，但我想制作一个仅图标按钮。我知道我们可以使用默认的主题滚轮图标来做到这一点，但我想使用我自己的图标。

我已成功创建（请参阅此处）带有自定义图标和文本的自定义按钮，但如果我删除文本，它就会变得不成比例且丑陋。

我尝试将 包装在

中，然后在其上调用 .button() 但它得到太大；我真正想要的是有一个图标按钮，就像主题附带的图标按钮一样，但使用我自己的图标。

希望我已经说得清楚易懂，

FA

（想想 extJS 仅图标按钮或 Adob​​e Flex（你为什么抛弃我）仅图标按钮）

Answer 1

这似乎对我有用（改编自演示此处以及您提到的答案）。看起来关键是将 text 选项设置为 false：

JavaScript:

$('#button').button({
    text: false, /* Don't include text on the button */
    icons: {
        primary: 'ui-icon-custom'
    }
});

CSS:

#button > span.ui-icon-custom {
    background-image: url(http://placekitten.com/25/25)
}

示例： http://jsfiddle.net/ReKbf/

（对糟糕的占位符图像表示歉意）