编辑jQuery UI手风琴图标颜色

Question

我只是想知道我是否可以编辑该手风琴的默认图标的颜色，即使扩展了该手风琴，也可以将其保持黑色。我只是在寻找一个实用的解决方案，该解决方案不需要重建新手风琴或上传自定义图标。

我的代码在这里：https：//jsfiddle.net/d4riog7/5ucxwa00/

不确定它可以在功能中实现：

 $( "#accordion" ).accordion({
      [...]
    });

甚至通过CSS

#accordion .ui-icon{
   [...]
}

欢呼

Answer 1

工作小提琴

使用背景图像。

.ui-icon{    背景图：url（http：//download.jqueryui.com/themeroller/images/ui-icons_black_256x240.png）！}

您可以以任何喜欢的颜色下载图标PNG文件。只需在以下URL中更改颜色部分：

http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png

或在本地下载并保存并使用Locall URL。

Answer 2

它不是完美的，但是请查看将此样式规则添加到小提琴中时会发生什么：

.ui-icon:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,255,255, 0.5);
  transition: all .3s linear;
}

不幸的是，图标是具有背景的span，因此没有太大的更改图像的空间，而是先前的答案。我的解决方案给整个跨度带来了色彩。

Answer 3

您可以使用以下代码来使用down箭头。

.ui-state-active .ui-icon {
    background-image: url("https://download.jqueryui.com/themeroller/images/ui-icons_444444_256x240.png");
}