jquery - 用本地镜像替换 jquery ui-icon

Question

我有一个上下文菜单，我可以在其中动态添加内容。我还想使用 jquery ui 图标样式在我的菜单上显示图标，因为它可以在 jquery 菜单上很好地 self 调整。我目前添加了一个时钟图标。但我想用我自己的图像替换它，同时仍然使用 jquery ui 图标样式。我怎样才能做到这一点？这是我在菜单中添加图标和其他文本的代码:

var getMenuItem = function (itemData) {
        var attr = $("<a>", {"class": "textStyle",
            title : itemData.name,
            html : itemData.name
        }) 
        var item = $("<li>")
            .append(attr);
        if (itemData.name=='concepts') {
            attr.append($("<i>", {"class":"ui-icon ui-icon-clock"}))}
        if (itemData.children) {
            var subList = $("<ul>");
            $.each(itemData.children, function () {
                subList.append(getMenuItem(this));
            });
            item.append(subList);
        }
        return item;
    };

Answer 1

在 Jquery Ui icons.css 中 cdn link

使用这个类:

.ui-icon-clock:before {
content: "\e023";!important
}

并用内容替换您的图像。 您可以尝试添加背景以及其他适当的样式。

======已更新========:

自己定义一个样式，像这样:

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

那么替换的时候就用.ui-icon-custom

这假定您的自定义图标位于您的 CSS 下的图像文件夹中...通常与 jQuery UI 图标映射相同的位置。创建图标后，它会得到一个像这样的类:class="ui-icon ui-icon-custom"，那个 ui-icon 类看起来像这样(也许是不同的图像，取决于主题):

.ui-icon { 
  width: 16px; 
  height: 16px; 
  background-image: url(images/ui-icons_222222_256x240.png); 
}

所以在您的风格中，您只是覆盖背景图像，如果需要更改宽度、高度等。