如何使用 jquery 错误（红色）图标答案

【问题标题】：How to use jquery error(red) icons如何使用 jquery 错误（红色）图标
【发布时间】：2011-06-03 22:33:32
【问题描述】：

我有这样的跨度

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

显示一个与主题颜色相同颜色的关闭图标。

但想使用可用于错误的红色图标。我应该使用哪个 jquery 类。

我在 Jquery css 中找到了一个类

.ui-state-error .ui-icon, .ui-state-error-text .ui-icon 
{background-image: url(images/ui-icons_cd0a0a_256x240.png); }

此图像是包含 jquery 红色图标的图像。但我不能用它。

【问题讨论】：

【解决方案1】：

将 ui-state-error 应用到包含图标的图层并移除默认背景和边框：

CSS：

.error-state-icon.ui-state-error {
    border:none;
    background:none;
}

HTML：

<div class="ui-state-error error-state-icon">
<span class='ui-icon ui-icon-info'></span>
</div>

【讨论】：

【解决方案2】：

尝试在文本前使用此类图标时，我遇到了换行问题以及图标和文本之间的对齐错误。

要避免图标添加换行符，请使用

<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>

要使文本更好地对齐，请使用以下内容

<span class="ui-icon ui-icon-name" style="display: inline-block;"></span>
<span style="display: inline-block; overflow: hidden;">Your text</span>

【讨论】：

【解决方案3】：

如果您只想要其他颜色的图标，而不是此处示例的整个框： http://jqueryui.com/themeroller/，在右下角

将此添加到您的 .css 文件中的任何位置：

.ui-icon-red { width: 16px; height: 16px; background-image: url(images/ui-icons_red_256x240.png); }

文件的名称和路径取决于您想要的颜色。

在 html 中：

<div class="ui-icon-red ui-icon-circle-zoomin">

【讨论】：

【解决方案4】：

span 的类只决定图标。

在其父级上设置“ui-state-error”以将图标的颜色更改为红色。

在此处查看图标示例：http://jqueryui.com/themeroller/（右侧边栏的底部）。

【讨论】：

【解决方案5】：

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

应该这样做。

已编辑，因为我认为我现在找到了正确的课程。

【讨论】：

我尝试了您的答案，但它在图标周围出现了红色方形边框。但我希望图标为红色。直接我想使用背景图像： url(images/ui-icons_cd0a0a_256x240.png);这已经在我上面写的类中定义了。
对不起，它改变了图标的颜色