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

Question

我想自定义手风琴的图标。我在这里找到了页面： http://jqueryui.com/accordion/#custom-icons 但似乎只给出了头部和激活头部的名称。

如果您只有一条指向图片文件的路径，该如何处理？

- sneaky

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;
}

- apaul

---

为什么iconClosed的背景大小是30px，而第一个只有20px？ - sneaky

@sneaky，使用特定的图像效果更好。 - apaul

@sneaky，示例中使用的原始图像的尺寸和宽高比是不同的。 - apaul

对我很有帮助。感谢 js fiddle 的示例。 - Jamie

@bonez 我不确定你的意思。你能分享一个演示问题的 fiddle 吗？ - apaul

Answer 2

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

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

非常类似于这个Stack Overflow问题。

- DevlshOne

Answer 3

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

- abc