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

Question

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

我已成功创建（请参阅here）带有自定义图标和文字的自定义按钮，但如果删除该文字则会变得不成比例且难看。

我尝试将<img>包裹在<div>中，然后在其上调用.button()但它太大了;我真正想要的是有一个图标按钮，就像那些附带主题但却使用我自己的图标的按钮。

希望我能让自己清醒明白，

FA

（想想extJS icon-only按钮或Adobe Flex（你为什么要离弃我）只有图标的按钮）

Answer 1

这似乎对我有用（改编自演示here和你提到的答案）。看起来关键是将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/

（为可怕的占位符图片道歉）