如何自定义jquery UI手风琴图标？

Question

我想自定义手风琴的图标.我在这里找到了这个页面 http://jqueryui.com/accordion/#custom-icons 但它似乎为header和activeHeader提供了一些名称.

如果你只有一个图像文件的路径,你怎么做？

Answer 1

如果您需要项目另一部分的标准图标,这是另一个选项:

工作实例

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 2

您需要编写一些自定义 CSS 来替换您计划使用的 jQuery UI 图标。例如，在示例代码的情况下：

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

与这个问题非常相似