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

Question

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

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

默认情况下,此列表在每个元素前面都带有点:

• 约翰·多伊
• 杰克雪
• 玛丽萌

相反,我想用一个图标替换点,如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伪元素的原因是你想要使用jQuery-UI图标 - 它以精灵地图的形式出现.换句话说 - 所有图标都在单个图像中的网格图案中找到,如下例所示:

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

如果您只想制作该<li>图像的背景,那么在不显示所有邻居的情况下制作所需的单个图标会更复杂.:before但是,通过使用元素,您可以为图标创建一个较小16px的16px框,从而可以轻松修剪为仅显示一个图标.

如果您想了解更多关于:before和:after伪元素,看看这个梦幻般的文章作为一个起点.

Answer 2

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

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