jquery - 如何指定(覆盖)JQuery 图标颜色

Question

我一直在我的网络应用程序中很好地使用 jQuery 图标，但到了我想使用默认情况下无法实现的颜色的地步。我目前正在使用主要使用绿色的“State Street”主题。但是我有一个带有白色文本的红色框，我也想使用一个白色的图标。主题提供了白色图标，但只有当图标位于具有“ui-state-focus”类的 div(或其他容器)内时，它们才会应用。这将使图标变为白色，但会将背景颜色更改为绿色，我想将其保留为红色。

有什么方法(很可能是通过 CSS)来覆盖 jQuery 用于图标的背景图像，以便我可以使用不同的颜色？

谢谢。

澄清:我想发布我目前正在使用的 html 会对我有所帮助:

<!-- currently produces a default 'grey' icon color -->
<!-- this b/c no jquery ui class (like ui-state-focus) given for errorMessage div -->
<div id="errorMessage">
    <span class="ui-icon ui-icon-alert" style="float: left"></span>
    Only 1 Activity can be added at a time 
</div>

我还有 CSS:

.dialog #errorMessage
{
    /*display: none;*/
    background-color: #CC3300;
    color: #FFFFFF;
    font-weight: bold;
    padding-top: 3px;
    padding-bottom: 3px;
    vertical-align: bottom;
    bottom: auto;
    font-size: .80em;
    width: 100%
}

“display: none”目前已被注释掉，所以我可以看到它。我确实将其设置为在错误捕获时淡入淡出。再次感谢您的帮助。

Answer 1

您可以使用以下 CSS 覆盖图标:

.ui-icon
{
    background-image: url(icons.png);
}

您可以下载您喜欢的任何颜色的图标 png 文件。只需更改以下网址中的颜色部分:

http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png

例如，如果您想要红色图标和矢车菊蓝色图标，您需要的 URL 是:

http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png
http://download.jqueryui.com/themeroller/images/ui-icons_6495ED_256x240.png

等等

(但不要将 URL 用作 CDN，最好将文件保存在本地)