CODEWITHSUNDEEP
cssjquery-ui
milandjukic88
milandjukic88

Reputation: 1125

How to change jquery-ui icon?

This is part of jquery-ui.css:

.ui-icon {
    width: 16px;
    height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url(images/ui-icons_0078ae_256x240.png);
}
.ui-widget-header .ui-icon {
    background-image: url(images/ui-icons_d8e7f3_256x240.png);
}
.ui-state-default .ui-icon {
    background-image: url(images/ui-icons_e0fdff_256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
    background-image: url(images/ui-icons_056b93_256x240.png);
}
.ui-state-active .ui-icon {
    background-image: url(images/ui-icons_f5e175_256x240.png);
}
.ui-state-highlight .ui-icon {
    background-image: url(images/ui-icons_f7a50d_256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url(images/ui-icons_fcd113_256x240.png);
}

.ui-icon-closethick { background-position: -96px -128px; }

last part works if I use it like this:

<p><span class="ui-icon ui-icon-closethick"></p>

In my case this icon is blue but i want to be red. Red icon is located in file ui-icons_cd0a0a_256x240.png. How to open this file and get this red icon?

Upvotes: 2

Views: 2831

Answers (2)

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107626

You could create your own "state" that specifies the red icons image as the background image for all children ui-icon classes. For example:

.ui-red-icons .ui-icon {
     background-image: url(images/ui-icons_cd0a0a_256x240.png);
}

And then add the custom state to your <p> element:

<p class="ui-red-icons"><span class="ui-icon ui-icon-closethick"></span></p>
                                <!-- (btw, you're missing this too) ^ -->

All icons you used within an element with that new class will be red.

Chances are that the red icon background image is already referenced within the jQuery CSS. If it is, then you should just re-use whatever selector will enable it.

Upvotes: 3

j08691
j08691

Reputation: 208032

.ui-icon-closethick { 
    background-image: url(images/ui-icons_cd0a0a_256x240.png);
}

Upvotes: 1

Related Questions