如何使用 jQuery UI 设置无序列表的样式，以便元素以 UI 图标而不是默认列表符号开头？

Question

我想使用 jQuery UI 图标集 中的图标来设置无序列表的样式。

<div>
    <ul>
        <li>John Doe</li>
        <li>Jack Snow</li>
        <li>Mary Moe</li>
    </ul>
</div>

默认情况下，此列表在每个元素前面显示有点：

• John Doe
• Jack Snow
• Mary Moe

相反，我想用图标替换点，例如 < code>ui-icon-person

如何实现这一点？

Answer 1

我知道这个问题有点过时了 - 但这里有一个完整的示例：

HTML:

<div>
  <ul class="icon person">
    <li>John Doe</li>
    <li>Jack Snow</li>
    <li>Mary Moe</li>
  </ul>
</div>

CSS:

ul.icon {
    list-style: none; /* This removes the default bullets */
    padding-left: 20px; /* This provides proper indentation for your icons */
}
ul.icon li { 
    position: relative; /* Allows you to absolutely place the :before element
                           relative to the <li>'s bounding box. */
}
ul.icon.person li:before {
    background: url(/images/ui-icons_888888_256x240.png) -144px -96px;
   /* ex: download.jqueryui.com/themeroller/images/ui-icons_888888_256x240.png */
   /* The -144px, -96px coordinate is the location of the 16x16 Person icon */

    /* The next 2 lines are necessary in order to make the :before pseudo-element
       appear, and thereby show it's background, your icon. */
    content: ''; 
    display: inline-block;

    /* Absolute is always in relation to the nearest positioned parent. In this
       case, that's the <li> with _relative_ positioning, above. */
    position: absolute;

    left: -16px; /* Places the icon 16px left of the <li>'s edge */
    top: 2px;    /* Adjust this based on your font-size and line-height */

    height: 16px; width: 16px; /* jQuery UI icons (with spacing) are 16x16 */
}

这是一个 jsFiddle 显示它正在运行。结果将如下所示：

我使用 :before 伪值的原因-element 是您想要使用 jQuery-UI 图标 - 它以精灵图的形式出现。换句话说 - 所有图标都以网格图案形式存在于单个图像中，如下例所示：

来源：http://download.jqueryui.com/themeroller/images/ui-icons_888888_256x240.png

如果您尝试仅将

设为该图像的背景，则在不显示所有图标的情况下显示您想要的单个图标会更加复杂它的邻居。不过，通过使用 :before 元素，您可以为图标创建一个较小的 16px x 16px 框，从而轻松修剪到仅显示一个图标。

如果您想了解有关 :before 和 :after 伪元素的更多信息，请查看 这篇精彩的文章作为起点。

Answer 2

查看页面的源码，只需设置列表项的类文件来清除标准元素，然后设置一个span标签来添加新的图标。

<li class="ui-state-default ui-corner-all">
  <span class="ui-icon ui-icon-person"></span>
</li>

Answer 3

ul li { 
    list-style-type: none; 
    background: url('your/path/image.png') no-repeat left center; 
}

您可能还需要添加一些左侧填充。