CODEWITHSUNDEEP
jquerycssjquery-ui
tkane
tkane

Reputation: 1777

How to replace one icon in jquery-ui?

I'd like to use resize_handle.png image in lieu of the default resizable icon that came with the jquery-ui package. Is there a simple way of doing that?

Upvotes: 1

Views: 1489

Answers (1)

jrummell
jrummell

Reputation: 43087

Yes, you can simply override the ui-icon-refresh css class with a background image of your choosing.

.ui-icon-refresh {
    background-image: url(../images/icons/icons.png);
    background-position: -64px -80px;
}

There are also styles for each type of state (ui-state-default, ui-state-hover, etc). So you may need to override those as well.

.ui-state-default .ui-icon-refresh,
.ui-state-hover .ui-icon-refresh {
    background-image: url(../images/icons/icons.png);
    background-position: -64px -80px;
}

Or, you can mark your custom css as important, which will override the more specific state styles defined by jQuery UI's css.

.ui-icon-refresh {
    background-image: url(../images/icons/icons.png) !important;
    background-position: -64px -80px !important;
}

Upvotes: 1

Related Questions