Как изменить значок jquery-ui?

Question

Это часть 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; } 

последняя часть работы, если я использую это так:

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

В моем случае это значок синего цвета, но я хочу быть красным. Красный значок находится в файле ui-icons_cd0a0a_256x240.png. Как открыть этот файл и получить эту красную иконку?

Answer 1

Вы можете создать свое собственное «состояние», которое определяет красный иконка изображения в качестве фонового изображения для всех детей ui-icon классов. Например:

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

А затем добавить пользовательское состояние на ваш <p> элемент:

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

Все иконки, которые вы использовали в качестве элемента с этим новым классом будет красным.

Скорее всего, что изображение фона красного значка уже упоминается в CSS jQuery. Если это так, то вам нужно просто повторно использовать любой селектор, который включит его.

Answer 2

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