我正在学习jQuery UI中的框架图标。
<span class="ui-icon ui-icon-circle-minus"></span>
在圆圈内生成一个减号图标 使用ThemeRoller Firefox Bookmarklet,我能够将图标的颜色更改为红色(使其看起来像删除按钮)。
问:如何将一个jQueryUI图标设置为红色,另一个图标设置为另一种颜色?
<span class="ui-icon ui-icon-circle-plus"></span>
我想把它变成绿色。
答案 0 :(得分:7)
使用ui-state-...
类通过图标更改元素的状态。您需要设计主题,以便不同状态的项目(突出显示,悬停,活动,错误,默认)具有不同的颜色。
<span class="ui-icon ui-icon-circle-plus ui-state-highlight"></span>
我建议不要这样使用状态(只是改变颜色,即)。我会在语义上使用状态,并根据需要渲染图标以与状态保持一致。如果我特别需要红色/绿色图标,我会专门生成这些图标作为图像,只需直接使用它们,而不是试图设计主题,以便为这些图标选择不同的颜色。
对于它的价值,我认为FamFamFam Silk图标与jQuery UI很好地集成。
答案 1 :(得分:1)
你不能这样做,至少不是在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
样式。