Использование шрифтов Удивительные значки в виде пуль

Пример использования шрифта awesome подобен этому (взятый из их примеры):

<ul class="icons">
    <li><i class="icon-ok"></i> Lists</li>
    <li><i class="icon-ok"></i> Buttons</li>
    <li><i class="icon-ok"></i> Button groups</li>
    <li><i class="icon-ok"></i> Navigation</li>
    <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>

Этот список отлично подходит для моих целей, если элементы списка - 1 строка. Но если элементы списка являются многострочными, то вторая строка и далее не отступают должным образом (по умолчанию).

Было бы неплохо, если бы эти значки могли использоваться в качестве стандартных css-палитр, так как таким образом многопозиционные позиции будут отступать красиво автоматически.

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

<ul class="icon-bullets">
    <li class="icon-ok">Lists</li>
    <li class="icon-ok">Buttons</li>
    <li class="icon-ok">Button groups</li>
    <li class="icon-ok">Navigation</li>
    <li class="icon-ok">Prepended form inputs</li>
</ul>

т.е. повторно использовать определенные классы значков, но сделать их частью li-элемента.

Ответы

Ответ 1

Ответ Йохана неверен. Шрифт Awesome использует веб-шрифты, а не большое фоновое изображение!

Следует отметить, что вы можете просто поместить класс в теги li, например:

<ul>
    <li class="icon-ok">Lists</li>
    <li class="icon-ok">Buttons</li>
    <li class="icon-ok">Button groups</li>
    <li class="icon-ok">Navigation</li>
    <li class="icon-ok">Prepended form inputs</li>
</ul>

Однако, есть одно предостережение, оно не будет работать в ie7, даже с условной линией стилей ie7. Элементы списка исчезают, просто оставляя значки! Если ваш не поддерживает ie7, то просто оставьте условную таблицу стилей, то, по крайней мере, те, кто, к сожалению, использует ie7, все равно смогут читать ваши списки, без значков!

Надеюсь, что это поможет.

Ответ 2

Я знаю, что опаздываю на вечеринку, но я не думаю, что любое решение, даже выбранное, полностью решает проблему. Речь идет о решении конкретной проблемы как можно точнее.

Согласно основному вопросу OP: "Было бы неплохо, если бы эти значки могли использоваться в качестве стандартных css-палитр, так как таким образом многопозиционные позиции будут отступать красиво автоматически".

У меня была такая же проблема, и вот как я ее решил: добавьте padding-left: в <ul>, затем добавьте "положительный" margin-right: и отрицательный margin-left: в li:before.

Что вы увидите в демо, в основном это: margin:0 5px 0 -15px;.

DEMO

Некоторые примечания:

Вам понадобится только CSS для этого решения, нет необходимости в дополнительной разметке
Это работает с многострочным контентом, поэтому, если ваш контент обертывается во вторую строку или больше, он не будет отображаться в элементе значок/список.
Нет необходимости использовать дополнительную разметку, такую как Font Awesome и Bootstrap, это просто неправильно, потому что все мы знаем, что нам нужно отделять контент от стиля от функциональности. Добавление дополнительной разметки для использования значков, очевидно, является раздуванием кода. В моем решении используется простая разметка:
```
<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>
```
Так как я не смог загрузить шрифт, я использовал символ » как значение content:'»', чтобы проиллюстрировать элемент значок/список. Однако я оставил все объявления @font-face, чтобы каждый мог использовать его и заменить путь к файлу шрифтов. Например:
```
url("path/to/font-name.woff") format("woff"),
```
Вам может понадобиться играть с значениями полей в li:before, чтобы правильно позиционировать значок/элемент списка, что вам все равно придется делать при использовании любого из вышеперечисленных решений или FontAwesome и Bootstrap решения.

Ответ 3

Модно поздно... удалите класс icon-ok из li и установите в списке, чтобы использовать значок в качестве пули. Возьмите символ Юникода со страницы Подробные страницы шрифта для значка. В этом случае icon-ok был перенесен на icon-check в версии 4. Юникод - это то же самое f00c.

ul.ok {
    list-style-type: none;
    margin-left: 0;
    padding-left: 1em;
}

ul.ok li:before {    
    font-family: 'FontAwesome';
    content: '\f00c';
    margin:0 5px 0 -15px;
    color: #f00;
}


<ul class="ok">
    <li>Lists</li>
    <li>Buttons</li>
    <li>Button groups</li>
</ul>

Использование значка шрифта Awesome для точек маркера с одним элементом элемента списка

Спасибо @armfoot за информацию инспектора. Я добавил этот снимок экрана, объяснив, как это сделать, щелкнув элемент ::before в дереве DOM.

Ответ 4

Для списков с несколькими столбцами я использую это:

ul.twocolumn, ol.twocolumn {
  -moz-column-count: 2;
  -moz-column-gap: 5px;
  -ms-column-count: 2;
  -ms-column-gap: 5px;
  -webkit-column-count: 2;
  -webkit-column-gap: 5px;
  column-count: 2;
  column-gap: 5px;
  list-style-position: inside; /* bugfix for hidden bullets/numbers */
}

Обычно, когда вы его объявляете:

<ul class="fa-ul twocolumn">
  <li><i class="fa-li fa fa-whatever-icon"></i> foo</li>
  <li><i class="fa-li fa fa-whatever-icon"></i> bar</li>
</ul>

Однако это не сработает... Имейте в виду, что значки шрифта Awesome НЕ будут по какой-то причине появляться с числом столбцов больше 1. Протестировано это с помощью Chrome, вы увидите несоответствие при переключении -webkit-column -count: 2