如何指定（覆盖）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：我自己指定了背景图片网址作为使用白色图标的文件。所以我在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＃dark green

.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;
}

Answer 4

可能最简单的方法是找出jQuery正在使用的图像文件，然后修改该图像文件（或创建自己的图像文件）并将其放到适当的位置。

Answer 5

按钮：[ 文字：//不要使用此
html：'否'，“ class”：'bg-secondary text-white p-2 border-0'，
点击：function（）{
  $（this）.dialog（“ close”）;
} ]

Answer 6

对于本地存储的css文件，在这种情况下为红色：

<style>
#my_id .ui-icon {
  background-image: url(my_css_file_location/ui-icons_cd0a0a_256x240.png);
}
</style>}