Как настроить иконки аккордеона jquery UI?

Question

Я хочу настроить значки для аккордеона. Я нашел страницу здесь http://jqueryui.com/accordion/#custom-icons Но, похоже, для заголовка и activeHeader есть имя что-то там.

Как вы это сделаете, если у вас есть путь к файлу изображения?

Answer 1

Вам нужно будет написать некоторый пользовательский CSS для замены значка пользовательского интерфейса jQuery, который вы планируете использовать. Например, в случае кода примера:

ui-icon-circle-arrow-e {background-image:url('path/to/my/images/filename.png') !important;} 

очень похож на этот SO question

Answer 2

Вот еще один вариант, если вам нужны стандартные иконки для другой части вашего проекта:

Working Example

JS

$(function() { 
    var icons = { 
     header: "iconClosed", // custom icon class 
     activeHeader: "iconOpen" // custom icon class 
    }; 
    $("#accordion").accordion({ 
     icons: icons 
    }); 
}); 

CSS

.ui-icon.iconOpen { 
    background:url('YOUR Image HERE') no-repeat; 
    background-size:20px; 
    width:20px; 
    height:20px; 
} 
.ui-icon.iconClosed { 
    background:url('YOUR Image HERE') no-repeat -5px; 
    background-size:30px; 
    width:20px; 
    height:20px; 
} 

Answer 3

$("#accordion").accordion({ 
    accordion: true, 
    speed: 500, 
    closedSign: '<img src="../../images/arrow-forward.png"/>', 
    openedSign: '<img src="../../images/arrow-down.png"/>' 
});