如何指定（覆盖）JQuery 图标颜色答案

【问题标题】：How To Specify (Override) JQuery Icon Color如何指定（覆盖）JQuery 图标颜色
【发布时间】：2010-12-21 18:00:05
【问题描述】：

我一直在我的 Web 应用程序中充分利用 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" 目前已被注释掉，所以我可以看到它。我确实将它设置为在错误捕获时淡入。再次感谢您的帮助。

【问题讨论】：

这个问题和stackoverflow.com/questions/2588558/jqueryui-themeroller很像

标签： jquery css jquery-ui icons

【解决方案1】：

可能最简单的方法是找出 jQuery 用于图标的确切图像文件，然后修改该图像文件（或创建您自己的）并将其放置到位。

【讨论】：

这当然可以，但我页面的其他部分使用了使用默认灰色图标的类，并且做得适当。我不想把那些图标弄乱，只在一个地方实现白色图标效果。

【解决方案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 文件。如果我想要一些疯狂的颜色，比如紫色，我需要创建自己的图标。请注意，与 jQuery CSS 文件中指定的 URL 相比，我需要将我自己的 CSS 文件中的 URL 加长，因为它们位于我的源代码中的两个不同位置。

【讨论】：

我也发现了这个。但是有没有简单的方法来改变图标的颜色？
谢谢！我想让我的“删除”按钮图标变成红色，但其他的保持默认。像冠军一样工作，但希望有一天他们会添加更好的方法。
@KevinPauli 他们有；只需添加您想要的颜色的类：class="ui-icon ui-icon-alert Red"

【解决方案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;
}

【讨论】：

传奇。我不知道这件事。我使用jqueryui.com/themeroller/images/… 生成了一组新的红色图标，然后我将其添加到我的主题中的一组图标中。 256 宽和 240 高是默认图标文件大小（查看您的主题图像文件）
我不相信 jQuery-UI 希望他们的图标生成器用作 CDN。我不确定他们的服务器是否缓存了图像，但是当缓存消失时它仍然必须生成该图像。像那样给他们的服务器施加压力不是很好......你应该生成一次并保存在你的服务器上

【解决方案4】：

您可以使用以下 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，最好将文件保存在本地）

【讨论】：

如果你只想在某些地方使用彩色图标，其余的保留默认值，你可以将你的css类设置为：ui-icon.redIcon { background-image: url(主题/altIcons/redIcons.png);并在 html 中使用“ui-icon-check redIcon”类引用它
我需要：“ui-icon ui-icon-check redIcon”
知道最新JQM的方法吗？
那个链接仍然有效，而且很棒。谢谢你，它真的帮助了我，因为没有办法设置图像图标的样式。
加 1 供搏击俱乐部参考矢车菊蓝。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

按钮：[ text: //不要使用这个
html:'No',"class":'bg-secondary text-white p-2 border-0',
点击：函数（）{
$(this).dialog("close");
} ]

【讨论】：