CODEWITHSUNDEEP
jquerycssjquery-ui
blainarmstrong
blainarmstrong

Reputation: 1020

How to get the coloured JQuery icons instead of black

I'm using the jQuery theme "mint-choc" in my page. All the icons inside the widgets show up as green. I can do the following to add icons to my own DOM objects:

<span class="ui-icon ui-icon-triangle-1-n"></span>

While the icons do show up just fine, they are black--not the same colour as the theme I'm using. Is there another class I'm supposed to add in order to change the colours to the same ones that my theme is using?

Upvotes: 0

Views: 1563

Answers (1)

jmm
jmm

Reputation: 990

The default icon set for ui-icon is:

.ui-icon,.ui-widget-content .ui-icon {
background-image: url(images/ui-icons_222222_256x240.png);

This image is the set of black icons.

For green you want to add this class 

.ui-state-default .ui-icon {
   background-image: url(images/ui-icons_9bcc60_256x240.png);
}

There are six different colors for the icons. Look at the css file starting at line 929 to see all of them.

If you inspect the theme page you can see that each icon is set up like this:

<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e">
    <span class="ui-icon ui-icon-carat-1-e"></span>
</li>

Changing the ui-state-default to any of the following to change the font color.

  • ui-widget-content
  • ui-widget-header
  • ui-state-focus
  • ui-state-active
  • ui-state-highlight
  • ui-state-error

Upvotes: 2

Related Questions