如何指定（覆盖）JQuery 图标颜色
我一直在网络应用程序中充分利用 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”当前已被注释掉，以便我可以看到它。我确实将其设置为在错误捕获时淡入。再次感谢您的帮助。
I've been making good use of the jQuery icons in my web app, but have come to a point where I would like to use a color that I'm not able to achieve by default. I'm currently using the "State Street" theme, which primarily uses green. But I have a red box with white text, and would like to use an icon that is white as well. There are white icons that are supplied with the theme, but they only get applied when the icons are inside a div (or some other container) that has a class of "ui-state-focus". This will make the icon white, but will change the background color to green, which I want to leave as red.
Is there any way (most likely via CSS) to override what background image jQuery uses for the icons, so that I can use a different color?
Thanks.
CLARIFICATION: I guess it would help for me to post the html I'm currently working with:
<!-- 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>
I also have 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" is currently commented out so I can see it. I do have it set up to fadeIn on error catch. Thanks again for the help.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
您可以使用以下 CSS 覆盖图标：
您可以下载任何您喜欢的颜色的图标 png 文件。只需更改以下网址中的颜色部分即可：
例如，如果您想要红色图标和矢车菊蓝色图标，则您需要的网址为：
等
（但不要将 URL 用作 CDN，请善意地将文件保存在本地）
You can overwrite the icons with the following CSS:
You can download the icon png file in any color you like. Just change the color part in the following url:
For example, if you want Red icons, and Cornflower Blue icons, the URLs you need are:
etc.
(but don't use the URL as a CDN, be nice and save the files locally)
自答：我自己将背景图像 URL 指定为使用白色图标的文件。因此，我在 CSS 文件中添加了几行：
这实际上覆盖了默认 jQuery css 文件想要用于图标的背景图像，并实现了我想要的颜色。当然，这只有效，因为主题中包含一个白色图标 .png 文件。如果我想要一些疯狂的颜色，比如紫色，我就需要创建自己的图标。请注意，我需要延长我自己的 CSS 文件中的 URL 与 jQuery CSS 文件中指定的 URL，因为它们位于我的源代码中的两个不同位置。
SELF-ANSWER: Specified the background-image URL myself to be the file that uses the white icons. So I added a few lines to my CSS file:
This essentially overrides the background image that the default jQuery css file wants to use for the icon, and achieved the color that I wanted. Of course this only worked because a white icon .png file was included with the theme. If I wanted some crazy color, like purple, I would have needed to create my own icon(s). Note that I needed to lengthen the URL in my own CSS file versus the URL that is specified in the jQuery CSS file, because they're located in two different places in my source.
使用内置图标生成器
图标颜色#00a300#深绿色
Use built-in icon generator
for icon color #00a300 # dark green
也许最简单的方法是准确找出 jQuery 用于图标的图像文件，然后修改该图像文件（或创建您自己的图像文件）并将其放置到位。
Probably the simplest way to do that is to find out exactly what imagefile jQuery is using for the icons, and then modify that image file (or create your own) and drop it into place.
按钮：[
text: //不要使用这个
html:'否',"class":'bg-secondary text-white p-2 border-0',
单击：函数() {
$(this).dialog("关闭");
}
]
buttons:[
text: //dont use this
html:' No',"class":'bg-secondary text-white p-2 border-0',
click: function() {
$(this).dialog("close");
}
]
对于本地存储的 css 文件，在这种情况下颜色为红色：
For locally stored css file in this case colour red: