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

Мы хотели бы использовать значок Font Awesome (http://fortawesome.github.com/Font-Awesome/) как маркер для неупорядоченных списков в CMS.

Текстовый редактор на CMS выводит только исходный HTML, поэтому дополнительные элементы/классы не могут быть добавлены.

Это означает отображение значков, когда надпись выглядит следующим образом:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Первая проблема, которую я вижу, если Font Awesome требует другого атрибута font-family, для которого потребуется отдельный элемент.

Возможно ли использование чистого CSS? Или мне нужно добавить элемент в начало каждого элемента списка, используя что-то вроде jQuery?

Я понимаю, что мы можем использовать откат заднего фона, но было бы замечательно использовать Font Awesome, если это возможно.

ОТВЕТЫ

Ответ 1

Решение:

http://jsfiddle.net/VR2hP/

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

Здесь сообщение в блоге, которое объясняет эту технику всесторонне.

Ответ 2

Новый fontawesome (версия 4.0.3) делает это действительно легко сделать. Мы просто используем следующие классы:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</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>to replace</li>
  <li><i class="fa-li fa fa-square"></i>default bullets in lists</li>
</ul>

Согласно этому (новому) URL: http://fontawesome.io/examples/#list

Ответ 3

Я хотел бы остановиться на некоторых ответах выше и приведенных в другом месте и предложить использовать абсолютное позиционирование вместе с : перед псевдо классом. Многие примеры выше (и в подобных вопросах) используют пользовательскую разметку HTML, включая метод обработки шрифтов Awesome. Это противоречит первоначальному вопросу и не является строго необходимым.

ДЕМО ЗДЕСЬ

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px
}

li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: FontAwesome;
  content: "\f058";
  color: green;
}

Это в основном это. Вы можете получить значение ISO для использования в CSS-контенте на шрифте Awesome cheatsheet. Просто используйте последние 4 алфавитномера с префиксом обратной косой черты. Итак, [&#xf058;] становится \f058

Ответ 4

Вот пример того, как использовать шрифт 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>

Если вы не можете найти его работоспособным после пробовать этот код, то вы не считаете библиотеку правильно. Согласно их веб-сайту, вы должны включить библиотеки как таковые:

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

Также проверьте причудливый пост Chris Coyier на знаковых шрифтах на своем веб-сайте CSS-трюки.

Здесь скринкаст, рассказывающий о том, как создать свой собственный значок-шрифт.

Ответ 5

@Tama, вы можете проверить этот ответ: Использование шрифтов Удивительные значки в виде маркеров

В принципе, вы можете сделать это, используя только CSS без необходимости дополнительной разметки, как предложено FontAwesome, и другие ответы здесь.

Другими словами, вы можете выполнить то, что вам нужно, используя ту же основную разметку, которую вы указали в своем первоначальном сообщении:

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

Спасибо.

Ответ 6

Мое решение с использованием стандартных <ul> и <i> внутри <li>

  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>

enter image description here

ДЕМО ЗДЕСЬ

Ответ 7

Я использую http://icomoon.io/ Он дает вам возможность загружать только нужные значки шрифтов. Выберите нужные значки, прикрепите ключ к значку и загрузите небольшой шрифт, а не весь удивительный шрифт (который по-прежнему огромен).

Вот мой эксперимент: http://jsfiddle.net/Annett/ZB7TK/