以颜色显示 jquery themeroller 图标答案

【问题标题】：Displaying jquery themeroller icons in colors以颜色显示 jquery themeroller 图标
【发布时间】：2012-11-18 23:50:19
【问题描述】：

全部，

我正在使用 jquery themeroller 警报图标。我希望这个图标以不同的颜色显示。例如，此图标在错误消息中显示为红色，在警告消息中显示为黄色。下面是默认图标。

<span class="ui-icon ui-icon-alert"></span>

是否可以为 Jquery 图标添加颜色？

【问题讨论】：

标签： jquery jquery-ui themeroller jquery-ui-theme

【解决方案1】：

您可以使用主题滚轮更改图标的颜色以及几乎所有其他内容，如下所示：

http://tinyurl.com/cjdquub

【讨论】：

【解决方案2】：

您可以使用主题滚轮或其他软件建立您的风格图标集框架，然后根据您的需要为不同的css类指定不同的背景图像URL。

例如：

red color <span class="ui-icon ui-icon-alert red"></span>
<br><br>
blue color <span class="ui-icon ui-icon-alert blue"></span>

CSS：

.ui-icon.red { background-image: url(http://code.jquery.com/ui/1.9.1/themes/base//images/ui-icons_cd0a0a_256x240.png); }
.ui-icon.blue { background-image: url(http://rhizosphere.googlecode.com/hg-history/e546f1a44825e2e1568de9d5bb87d3f2b1f41acd/src/stylesheets/blue/images/ui-icons_6391de_256x240.png); }

所以核心的jQuery UI css是一样的，你只需覆盖特定的属性。

这是一个有效的小提琴：http://jsfiddle.net/rrbn3/

【讨论】：