jqueryui themeroller

我正在学习jQuery UI中的框架图标。jqueryui themeroller

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

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

问：如何让一个jQueryUI图标变成红色而另一个变成另一种颜色？

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

我想使这个绿色。

另请参阅此问题：http://stackoverflow.com/a/19121287/276093 – 2015-06-05 09:37:49

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

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

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

对于它的价值，我认为FamFamFam Silk图标与jQuery UI很好地结合在一起。

2010-04-06 21:49:52 tvanfosson

感谢您提供关于FamFamFam的提示。 – 2010-04-06 22:22:40

关于Silk + jQuery UI集成如何完成，您有没有更多的细节？ – Armand 2010-08-31 13:38:20

@Alison - 整合可能是错误的词。我实际上并没有在jQuery UI组件中使用Silk图标，而是在jQuery UI组件旁边使用图标。从设计角度来看，他们看起来很好。 – tvanfosson 2010-08-31 15:01:15

你不能这样做，至少不能在ThemeRoller的情况下。 Themeroller使用一个精灵图像...这是一个包含所有图标的大图像。

你可以制作另一个主题，它是Spritemap图像到你的图像文件夹，并进入你的jQuery UI CSS并更改.ui-icon-circle-plusbackground-image属性。

它应该是这样的：

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

那就需要看起来像这样：

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

你可以看一下.ui-icon样式它目前使用的图像。

2010-04-06 21:48:28

我认为ThemeRoller会为每个状态产生不同的精灵。无论如何，我的主题中有5个独立的图标精灵。根据您设置状态的不同，精灵的颜色会有所不同。 – tvanfosson 2010-04-06 21:51:22

@tvan - 不错，但只有当他的某个状态已经是红色时...在这种情况下，如果他总是想要减号红色，仍然是同样的解决方案，请更改该元素的背景图像（他已经拥有图像这种情况...比编辑小部件还要容易得多）。 – 2010-04-06 21:56:02

回答