Как оформить неупорядоченный список с помощью пользовательского интерфейса jQuery, чтобы элементы начинались со значка пользовательского интерфейса вместо символа списка по умолчанию?

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

Глядя на источник для страницы, просто установите файл класса элемента списка, чтобы очистить стандартный элемент, а затем установите тег 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; 
}

Возможно, вам также понадобится добавить немного левого отступа.