Question

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

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

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

问：如何将一个jQueryUI图标设置为红色，另一个图标设置为另一种颜色？

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

我想把它变成绿色。

Answer 1

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

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

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

对于它的价值，我认为FamFamFam Silk图标与jQuery UI很好地集成。

Answer 2

你不能这样做，至少不是在ThemeRoller的上下文中。 Themeroller为此使用了一个精灵图像......一个包含所有图标的大图像。

您可以创建另一个主题，将spritemap图像添加到images文件夹，然后进入jQuery UI CSS并更改.ui-icon-circle-plus background-image属性。

它应该是这样的：

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

需要看起来像这样：

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

您可以查看当前使用的图片的.ui-icon样式。