jQueryUI Button: How to change Button-Icon 'color'

Question

I have placed a html button inside a div in the following manner:

<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 div is assigned with the class:ui-state-highlight the button's icon color has changed to blue.

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 span to have the effect (color) of 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.

score 1 · Accepted Answer · answered Mar 04 '13 at 09:00

1

Re-writing the ui-state-highlight class applied for the containers (such as divs and spans) fix the problem.

answered Mar 04 '13 at 09:00

dan

1,545
3
20
29

score 0 · Answer 2 · answered Mar 01 '13 at 10:20

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)

Edit:

Or change outer div class to 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>

Thanks for the reply. I missed one more thing in my listing. Inside the same *div* there contains another *span* that shows a different icon but must be applied with `ui-state-highlight` (blue color pallet). If i re-color the given *png* i will loose this effect, don't I? — dan, Mar 01 '13 at 10:29

score 0 · Answer 3 · answered Mar 01 '13 at 10:32

0

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({
  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):

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

answered Mar 01 '13 at 10:32

gangakvp

91
3

Thanks for the reply. Could you please verify the steps I followed. **[Step 01]** created a copy of `ui-icons_454545_256x240.png` as the same place as the jQuery UI icon maps are and rename it to `custom.png` **[Step 02]** created the class `.ui-icon-custom` in my *site css* **[Step 03]** `$('#button').button()` routine is called. After all this I still get the *bluish* icon. Have I missed anything? Thanks again. – dan Mar 01 '13 at 11:42
And does this solution overwrites the styles of `ui-state-highlight` which applied to the parent *div* only to this span? I have slightly changed my original question little later on :) – dan Mar 01 '13 at 12:04

jQueryUI Button: How to change Button-Icon 'color'

3 Answers3