jquery-ui - 如何将自定义图标添加到标准 jQuery UI 主题？

Question

可以轻松使用标准图标集中提供的图标之一:

$("#myButton").button({icons: {primary: "ui-icon-locked"}});

但是如果我想添加一个不属于框架图标集的我自己的图标怎么办？

我认为这就像给它你自己的带有背景图像的 CSS 类一样简单，但这不起作用:

.fw-button-edit {
    background-image: url(edit.png);
}

有什么建议吗？

Answer 1

我还可以推荐:

.ui-button .ui-icon.your-own-custom-class {
    background-image: url(your-path-to-normal-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

.ui-button.ui-state-hover .ui-icon.your-own-custom-class {
    background-image: url(your-path-to-highlighted-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

然后输入JS代码:

        jQuery('selector-to-your-button').button({
        text: false,
        icons: {
            primary: "you-own-cusom-class"   // Custom icon
        }});

它对我有用，希望对你也有用!