Использование глификона в качестве точки пучка LI (Bootstrap 3)

Как я могу изменить точки маркера в списке HTML и использовать глификоны, которые поставляются с Bootstrap 3?

Итак, чтобы:

<ul>
    <li>...</li>
    <li>...</li>
</ul>

Отображается как:

 [icon]  Facere possimus, omnis voluptas assumenda est, numquam eius modi
         omnis dolor repellendus. Non numquam eius modi numam dolor omnis 
         tempora incidunt ut labore.

 [icon]  Facere possimus, omnis voluptas assumenda est, numquam eius modi
         omnis dolor repellendus. Non numquam eius modi numam dolor omnis 
         tempora incidunt ut labore.

Я бы предпочел не добавлять дополнительный HTML, такой как этот...

<ul>
    <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
    <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
</ul>

Ответы

Ответ 1

Это не слишком сложно с небольшим CSS, и это намного лучше, чем использование изображения для пули, поскольку вы можете масштабировать его и покрасить, и он будет поддерживать резкость при любых разрешениях.

  • Найдите код символа глификона, открыв Документы Bootstrap и проверив символ, который вы хотите использовать.

    Inspecting a glyphicon

  • Используйте этот код символа в следующем CSS

    li {
    display: block;
}

li:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    margin-top: 4px;
    margin-left: -17px;
    color: #CCCCCC;
}

    Вам может понравиться настроить цвет и поля в соответствии с вашими размерами и вкусом.

Просмотр демонстрации и кода

Ответ 2

Если кто-то придет сюда, чтобы сделать это с помощью шрифтов Awesome Icons (как я был), посмотрите здесь: https://fortawesome.github.io/Font-Awesome/examples/

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

Классы fa-ul и fa-li легко заменяют маркеры по умолчанию в неупорядоченных списках.

Ответ 3

Я использую версию simplefied (только используя позицию relative) на основе ответа @SimonEast:

li:before {
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    position: relative;
    margin-right: 10px;
    top: 3px;
    color: #ccc;
}

Ответ 4

Если вы хотите использовать LESS, это может быть достигнуто так:

li {
    .glyphicon-ok();

    &:before {            
        .glyphicon();            
        margin-left:-25px;
       float:left;
    }
}