使用jQuery UI图标作为<li> backgrounds </li>

Question

我想用the jQuery UI icon sheet中的图片替换常规html列表项目点：

CSS：

li { padding: 0 0 0 5px; }

HTML

<ul>
    <li class="ui-icon ui-icon-play">abc</li>
    <li>abc</li>
</ul>

添加图像类时，我看不到文字。我在这里想念的是什么？

http://jsfiddle.net/KKhZg/509/

Answer 1

当您将课程添加到li.ui-icon时，它将获得ui-icon的宽度，该宽度定义为16px。

我更新了您的fiddle。

Answer 2

如上所述，您可以在li。

中插入嵌套元素

如果您不想这样做，只需将这两个规则添加到li：

li {
    text-indent: 16px !important;
    overflow: visible !important;
}

http://jsfiddle.net/KKhZg/512/

16px是所有jquery ui图标的宽度，所以我想你希望你的文字在图标后缩进。

我放了!important，因为看起来在jsfiddle上，jqueryUI是在用户css之后加载的，否则text-indent和overflow会被.ui-icon覆盖

Answer 3

这将归因于该类名的文本缩进。您可能需要插入嵌套元素（可能是跨度），然后在该元素上应用图标类。