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文件中不使用的图标来实现这一点，这在我使用 nuget 升级到新版本的 JQuery 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;
}

Answer 2

您可以通过在 css 中为该类定义自己的样式来做到这一点：

.ui-icon-locked { background-image: url(images/custom.png); }