如何指定(覆盖)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"目前已被注释掉,所以我可以看到它.我确实将它设置为fadeIn上的错误捕获.再次感谢您的帮助.

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,要善于在本地保存文件)

Answer 2

SELF-ANSWER:我自己指定了背景图像URL作为使用白色图标的文件.所以我在CSS文件中添加了几行:

.dialog #errorMessage .ui-icon
{
    background-image: url(../../CSS/themes/custom_green/imag/ui-icons_ffffff_256x240.png);
}

这基本上覆盖了默认jQuery css文件想要用于图标的背景图像,并实现了我想要的颜色.当然这只能起作用,因为主题中包含一个白色图标.png文件.如果我想要一些疯狂的颜色,比如紫色,我需要创建自己的图标.请注意,我需要延长我自己的CSS文件中的URL与jQuery CSS文件中指定的URL,因为它们位于源代码中的两个不同位置.

Answer 3

使用内置图标生成器作为图标颜色#00a300#深绿色

.ui-icon
{
    background-image: url(http://jqueryui.com/themeroller/images/?new=00a300&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png) !important;
}