Jquery ui JQUERYUITHEMORLER

我正在学习jQueryUI中的框架图标

<span class="ui-icon ui-icon-circle-minus"></span>

在圆内生成减号图标。
使用ThemeRoller Firefox Bookmarklet，我可以将图标的颜色更改为红色（使其看起来像一个删除按钮）

问：我如何使一个jQueryUI图标为红色，另一个图标为其他颜色

<span class="ui-icon ui-icon-circle-plus"></span>

---

我想把这个变成绿色。

你不能这样做，至少在他们的背景下不行。Themeroller为此使用一个精灵图像…一个包含所有图标的大图像

您可以创建另一个主题，将它的spritemap图像添加到图像文件夹中，然后进入jQuery UI CSS并更改

.UI图标圆圈加上
背景图像
属性

应该是这样的：

.ui-icon-circle-plus { background-position: 0 -192px; }

.ui-icon-circle-plus {
   background-image: url(RedIcons.png);
   background-position: 0 -192px; 
}

它需要看起来像这样：

.ui-icon-circle-plus { background-position: 0 -192px; }

.ui-icon-circle-plus {
   background-image: url(RedIcons.png);
   background-position: 0 -192px; 
}

您可以查看它当前使用的图像的
.ui图标
样式。
使用
ui-state-…
类更改带有图标的元素的状态。您需要设计主题，使处于不同状态（高亮、悬停、活动、错误、默认）的项目具有不同的颜色

<span class="ui-icon ui-icon-circle-plus ui-state-highlight"></span>



我建议不要以这种方式使用状态（也就是说，只是为了改变颜色）。我会在语义上使用状态，并让图标根据需要呈现，以与状态保持一致。如果我特别需要红色/绿色图标，我会将这些图标专门生成为图像，并直接使用它们，而不是试图为这些图标设计主题以获得不同的颜色选择

值得一提的是，我认为图标与jQuery UI的集成非常好。
我认为ThemeRoller为每个状态生成不同的精灵。我有5个单独的图标精灵在我的主题无论如何。精灵的颜色根据状态设置的不同而有所不同。@tvan-True，但前提是他的一个状态已经是红色…在这种情况下，仍然是相同的解决方案如果他总是想要负红色，请更改该元素的背景图像（在这种情况下，他只是已经有了图像…仍然比编辑小部件容易得多）。感谢您提供有关Fam的提示。您有关于如何实现Silk+jQuery UI集成的更多详细信息吗？@Alison-Integrate可能是个错误的词。我实际上并没有在jQuery UI组件中使用丝绸图标，而是在jQuery UI组件旁边使用图标。从设计角度看，它们看起来很好。感谢您的澄清：）那么jQuery UI是否仍显示自己的图标？另请参见以下问题：