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

Question

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

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

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

• 李四
• jack 斯诺
• 玛丽萌

相反，我想用图标替换圆点，例如 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 showing it working .结果看起来像这样:

我使用 :before 的原因伪元素是你想要使用 jQuery-UI 图标——以 Sprite 图的形式出现。换句话说 - 所有图标都位于单个图像中的网格图案中，如本例所示:

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

如果您尝试只制作 <li> 的背景那个图像，让你想要的单个图标出现而不显示它的所有邻居会更复杂。通过使用 :before但是，您可以创建一个更小的元素，16px通过 16px图标框，从而轻松缩小到只显示一个图标。

如果您想了解更多关于 :before 的信息和 :after伪元素，查看 this fantastic article作为起点。