How To Specify (Override) JQuery Icon Color

Question

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.

this question is very similar to http://stackoverflow.com/questions/2588558/jqueryui-themeroller — Ilya Kochetov, Mar 14 '11 at 20:11

score 97 · Accepted Answer · answered Oct 01 '13 at 16:23

97

You can overwrite the icons with the following CSS:

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

You can download the icon png file in any color you like. Just change the color part in the following url:

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

For example, if you want Red icons, and Cornflower Blue icons, the URLs you need are:

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

Red Cornflower Blue

etc.

(but don't use the URL as a CDN, be nice and save the files locally)

answered Oct 01 '13 at 16:23

matt burns

24,742
13
105
107

6

And if you want to use the color icons only in certain places, and leave the defaults for the rest, you can set your css classes as: ui-icon.redIcon { background-image: url(themes/altIcons/redIcons.png); } and refer to it in html with the classes "ui-icon-check redIcon" – Jamie M Feb 05 '14 at 15:54
1

I needed: "ui-icon ui-icon-check redIcon" – kyle Jul 20 '14 at 21:49
Know a way with the latest JQM? – Aug 01 '14 at 20:46
1

That link still works, and is wonderful. Thank you for this, it really helped me out because there was no way to style the image icon. – Travis J Jun 04 '15 at 19:59
Plus 1 for fight club reference on cornflower blue. – wawiwa May 03 '19 at 17:55

score 22 · Answer 2 · answered Dec 03 '09 at 21:29

22

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:

.dialog #errorMessage .ui-icon
{
    background-image: url(../../CSS/themes/custom_green/imag/ui-icons_ffffff_256x240.png);
}

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.

answered Dec 03 '09 at 21:29

Matt

23,363
39
111
152

i too found this. but is there a easy way to change the color of the icons? – Prasad Jul 07 '10 at 12:47
4

Thanks for this! I wanted to make my "delete" button icons red but leave the others as default. Works like a champ, but hopefully they add a better way someday. – Kevin Pauli Jul 16 '10 at 13:59
@KevinPauli They have; just add a class of the colour you want: `class="ui-icon ui-icon-alert Red"` – Bernhard Hofmann Feb 19 '13 at 12:42

score 16 · Answer 3 · edited May 13 '12 at 02:08

16

Use built-in icon generator for icon color #00a300 # dark green

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

edited May 13 '12 at 02:08

Community

1
1

answered Jul 19 '11 at 06:43

mcdba

185
1
2

Legend. I didn't know about this. I used http://jqueryui.com/themeroller/images/?new=ff0000&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png to generate a new set of red icons which I then added to the set of icons in my theme. 256 width and 240 height is the default icons file size (have a look in your themes image file) – Joe Aug 06 '11 at 10:55
31

I don't believe jQuery-UI wants their icon generator used as a CDN. I'm not sure if their server caches the images but it still has to generate that image when the cache is gone. It's not very nice to stress their server like that.... You should generate it once and save it on your server – sparebytes Jun 26 '12 at 15:38

score 0 · Answer 4 · answered Nov 30 '09 at 19:07

0

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.

answered Nov 30 '09 at 19:07

singingwolfboy

5,336
3
27
32

1

That would certainly work, but other parts of my page use classes that make use of the default grey icons, and do it appropriately. I wouldn't want to mess up those icons to achieve the white icon effect in only one place. – Matt Nov 30 '09 at 19:11

score 0 · Answer 5 · answered Jun 28 '19 at 05:41

0

buttons:[ text: //dont use this
html:' No',"class":'bg-secondary text-white p-2 border-0',
click: function() {
$(this).dialog("close");
} ]

answered Jun 28 '19 at 05:41

jhombalz

9
1

score -2 · Answer 6 · edited Aug 15 '14 at 16:24

-2

For locally stored css file in this case colour red:

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

edited Aug 15 '14 at 16:24

tcooc

20,629
3
39
57

answered Jul 19 '14 at 17:29

user2259146

259
2
5
15

How To Specify (Override) JQuery Icon Color

6 Answers6

Linked