css - 如何更改 jquery-ui 图标？

Question

这是 jquery-ui.css 的一部分:

.ui-icon {
    width: 16px;
    height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url(images/ui-icons_0078ae_256x240.png);
}
.ui-widget-header .ui-icon {
    background-image: url(images/ui-icons_d8e7f3_256x240.png);
}
.ui-state-default .ui-icon {
    background-image: url(images/ui-icons_e0fdff_256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
    background-image: url(images/ui-icons_056b93_256x240.png);
}
.ui-state-active .ui-icon {
    background-image: url(images/ui-icons_f5e175_256x240.png);
}
.ui-state-highlight .ui-icon {
    background-image: url(images/ui-icons_f7a50d_256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url(images/ui-icons_fcd113_256x240.png);
}

.ui-icon-closethick { background-position: -96px -128px; }

如果我像这样使用它，最后一部分就可以工作:

<p><span class="ui-icon ui-icon-closethick"></p>

就我而言，这个图标是蓝色的，但我想是红色的。 红色图标位于文件 ui-icons_cd0a0a_256x240.png 中。 如何打开这个文件并得到这个红色图标？

Answer 1

您可以创建自己的“状态”，将红色图标图像指定为所有子项的背景图像 ui-icon类。例如:

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

然后将自定义状态添加到您的<p>中元素:

<p class="ui-red-icons"><span class="ui-icon ui-icon-closethick"></span></p>
                                <!-- (btw, you're missing this too) ^ -->

您在具有该新类的元素中使用的所有图标都将为红色。

红色图标背景图像可能已在 jQuery CSS 中引用。如果是，那么您应该重新使用任何可以启用它的选择器。