jquery - 为 JQueryUI 使用外部图标

Question

有没有一种简单的方法可以为 JQuery UI 使用外部图标？

假设我在按钮上有以下图标:

  <script type="text/javascript">
    $(document).ready(function () {
        $('#aButton').button({
            icons: 
            {
                primary: "ui-icon-newicon"
            }
        });
    });
</script>

<button id="aButton">hello</button>

是否可以显示外部 jpeg 或 png？最简单的方法是在不编辑现有 JQuery UI png 文件的情况下执行此操作？

我以前通过手动编辑和替换 ui-icons_xxxxxx_256x240.png 文件中未使用的图标来实现这一点，在我升级到新版本的 JQuery 之前效果很好使用 nuget 的 UI 和 png 文件被替换。

编辑:

在我的 Site.css(它是一个 ASP.NET MVC3 应用程序)中创建了这个类，并且需要添加 !important 标志。状态没有任何问题(当按钮突出显示、悬停等时)。

.ui-icon-newicon
{
    background-image: url(images/delete.png) !important;
    background-position: 0 0;
}  

Answer 1

当然，只需添加您自己的文件并为该特定按钮提供一个 CSS 类，例如:

#aButton.ui-icon-custom {
    background-image: url(...);
    background-position: 0 0;
}