javascript jQueryUI 按钮：如何更改按钮图标“颜色”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15155225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQueryUI Button: How to change Button-Icon 'color'
提问by dan
I have placed a html buttoninside a divin the following manner:
我以下列方式在div中放置了一个html 按钮：
<div class="ui-state-highlight">
<button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary">
<!-- first span -->
<span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
<!-- second span -->
<span class="ui-button-text">Save</span>
</button>
<!-- third span -->
<span class="ui-icon ui-icon-info"></span>
<strong>All</strong> form fields are required.
</div>
Since the divis assigned with the class:ui-state-highlightthe button'sicon color has changed to blue.
由于DIV与类分配：ui-state-highlight该按钮的图标颜色变为蓝色。
Is there is a way I can revert the icon color back to: default (black)color?
有没有办法可以将图标颜色恢复为：默认（黑色）颜色？
And further, I need the icon in the third spanto have the effect (color) of ui-state-highlight.
而进一步，我需要在图标第三跨度有效果（彩色）ui-state-highlight。
I'v tried applying ui-state-default, just to the first span(containing the icon), but that did not give the expected effect.
我试过应用ui-state-default, 只是到第一个跨度（包含图标），但这并没有产生预期的效果。
采纳答案by dan
Re-writing the ui-state-highlightclass applied for the containers (such as divs and spans) fix the problem.
重新编写ui-state-highlight应用于容器的类（例如divs 和 spans）解决了问题。
回答by dan
You can add new style, where will be path to images with default (black) icon color (http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_2e83ff_256x240.png)
您可以添加新样式，其中将是默认（黑色）图标颜色的图像路径（http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_2e83ff_256x240.png）
Edit:
编辑：
Or change outer div class to ui-state-default:
或者将外部 div 类更改为 ui-state-default：
<div class="ui-state-default">
<button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary">
<span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
<span class="ui-button-text">Save</span>
</button>
</div>
回答by gangakvp
Define a style yourself, like this:
自己定义一个样式，像这样：
.ui-icon-custom { background-image: url(images/custom.png); }
Then just use it when calling .button(), like this:
然后在调用 .button() 时使用它，就像这样：
$('#button').button({
label: 'Test',
icons: {primary: 'ui-icon-custom', secondary: null}
});
This assumes that your custom icon is in the images folder beneath your CSS...the same place as the jQuery UI icon map typically is. When the icon's created it gets a class like this: class="ui-icon ui-icon-custom", and that ui-icon class looks like this (maybe a different image, depending on theme):
这假设您的自定义图标位于 CSS 下方的图像文件夹中……与 jQuery UI 图标映射通常位于同一位置。创建图标后，它会得到一个这样的类：class="ui-icon ui-icon-custom"，而该 ui-icon 类看起来像这样（可能是不同的图像，取决于主题）：
.ui-icon {
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png);
}
So in your style you're just overriding that background-image, if needed change the width, height, etc.
所以在你的风格中，你只是覆盖了背景图像，如果需要的话，改变宽度、高度等。
