如何将自定义图标添加到标准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
        }});

它对我有用,并希望它也适合你!

Answer 2

我相信他不会工作的原因是因为你的图标的background-image属性被jQuery UI默认的精灵图标背景图像所覆盖.有问题的风格是:

.ui-state-default .ui-icon {
    background-image: url("images/ui-icons_888888_256x240.png");
}

这比.fw-button-edit选择器具有更高的特异性,从而覆盖了背景图像的特性.由于它们使用精灵,因此.ui-icon-locked规则集仅包含background-position获取精灵图像位置所需的精度.我相信使用它会起作用:

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

或其他具有足够特异性的东西.有关CSS特异性的更多信息,请访问:http://reference.sitepoint.com/css/specificity