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

Question

我一直在我的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"目前已被注释掉，以便我可以看到它。我已经设置好在错误捕获时淡入。再次感谢您的帮助。

- Matt

---

这个问题非常类似于http://stackoverflow.com/questions/2588558/jqueryui-themeroller。 - Ilya Kochetov

Answer 1

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

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

您可以下载任何颜色的图标PNG文件。只需更改以下URL中的颜色部分即可：

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

例如，如果你想要红色图标和矢车菊蓝色图标，你所需的URL是：
https://example.com/icons/red.png
https://example.com/icons/cornflowerblue.png

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

等等。

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

- matt burns

---

如果你只想在某些地方使用彩色图标，而其余地方仍采用默认图标，你可以将css类设置为：ui-icon.redIcon { background-image: url(themes/altIcons/redIcons.png); }， 然后在html中使用"class"属性引用它，例如："ui-icon-check redIcon"。请注意，这里的翻译保留了原意，并将其变得更通俗易懂。 - Jamie M

我需要的是："ui-icon ui-icon-check redIcon" - kyle

你知道最新的JQM有什么方法吗？ - user241244

那个链接仍然有效，而且非常好。谢谢你，这真的帮了我很大的忙，因为没有办法对图像图标进行样式设置。 - Travis J

在玉米花蓝色上提到《搏击俱乐部》的话，加一分。 - wawiwa

Answer 2

自我回答： 我特意将背景图片的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，因为它们位于我的源代码中的两个不同位置。

- Matt

---

我也发现了这个问题。但是有没有一种简单的方法可以改变图标的颜色？ - Prasad

谢谢你！我想让我的“删除”按钮图标变成红色，但是其他按钮保持默认颜色。现在已经成功了，但希望将来能添加更好的方法。 - Kevin Pauli

@KevinPauli 他们已经有了；只需添加您想要的颜色类：class="ui-icon ui-icon-alert 红色" - Bernhard Hofmann

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

- mcdba

---

传奇。我不知道这个。我使用http://jqueryui.com/themeroller/images/?new=ff0000&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png生成了一组新的红色图标，然后将其添加到我的主题图标集中。 256宽度和240高度是默认图标文件大小（请查看您的主题图像文件）。 - Joe

我不认为jQuery-UI希望他们的图标生成器被用作CDN。我不确定他们的服务器是否缓存了这些图像，但当缓存消失时仍需要生成该图像。这样会给他们的服务器造成负担，不太好。你应该将其生成一次并保存在自己的服务器上。 - sparebytes

Answer 4

按钮：[ 文本：//不要使用这个
HTML：'否'，"class":'bg-secondary text-white p-2 border-0'，
点击：function() {
$(this).dialog("close");
} ]

- jhombalz

Answer 5

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

- singingwolfboy

---

这肯定可以实现，但我页面的其他部分使用了利用默认灰色图标的类，并且使用得很恰当。我不想为了在一个地方实现白色图标效果而破坏那些图标。 - Matt

Answer 6

在本例中，针对本地存储的CSS文件，颜色为红色：

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

- user2259146