如何自定义 jquery UI 手风琴图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17816781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to customize jquery UI accordion icons?
提问by sneaky
I want to customize the icons for the accordion. I found the page here http://jqueryui.com/accordion/#custom-iconsBut it seems to give a name of something there for the header and activeHeader.
我想自定义手风琴的图标。我在这里找到了这个页面 http://jqueryui.com/accordion/#custom-icons但它似乎为标题和 activeHeader 提供了一个名称。
How do you do this, if you just have a path to an image file?
如果你只有一个图像文件的路径，你怎么做？
采纳答案by DevlshOne
You would need to write some custom CSS to replace the jQuery UI icon that you plan to use. For example, in the case of the example code:
您需要编写一些自定义 CSS 来替换您计划使用的 jQuery UI 图标。例如，在示例代码的情况下：
ui-icon-circle-arrow-e {background-image:url('path/to/my/images/filename.png') !important;}
Very similar to this SO question
非常类似于这个SO问题
回答by apaul
Here's another option should you need the standard icons for another part of your project:
如果您需要项目其他部分的标准图标，这里有另一种选择：
JS
JS
$(function () {
var icons = {
header: "iconClosed", // custom icon class
activeHeader: "iconOpen" // custom icon class
};
$("#accordion").accordion({
icons: icons
});
});
CSS
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;
}
回答by abc
$("#accordion").accordion({
accordion: true,
speed: 500,
closedSign: '<img src="../../images/arrow-forward.png"/>',
openedSign: '<img src="../../images/arrow-down.png"/>'
});
