我如何自定义图标添加到标准jQuery UI的主题？ [英] How do I add a custom icon to a standard jQuery UI theme?

问题描述

有容易使用可从标准图标集的图标之一：

It is easy to use one of the icons available from the standard icon set:

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

但是，如果我想补充我自己的一个图标是不是框架图标集的一部分？

But what if I want to add one of my own icons that is not part of the framework icon set?

我认为这将是为给它一个背景图片自己的CSS类一样简单，但是，这并不工作：​​

I thought it would be as easy as giving it your own CSS class with a background image, but that doesn't work:

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

有什么建议？

推荐答案

我也可以推荐：

.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 code：

then just type in the JS code:

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

这为我工作，希望它为你工作呢！

It worked for me and hope it works for you too!

这篇关于我如何自定义图标添加到标准jQuery UI的主题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！