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

Question

我有这样的跨度

<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红色图标的图像。 但是我无法使用它。

Answer 1

span的类只决定图标。

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

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

Answer 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>

Answer 3

如果您只想要带有其他颜色的图标，而不是整个框，如下例所示： http://jqueryui.com/themeroller/，位于右下方conner

将其添加到.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">

Answer 4

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

应该这样做。

编辑，因为我认为我现在找到了合适的班级。

Answer 5

将 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>

<强> Demo >>