Использование значка Font 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, если это возможно.

Решение:

http://jsfiddle.net/VR2hP/

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

Вот сообщение в блоге, в котором подробно объясняется эта техника.

Новый 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

Я хотел бы опираться на некоторые из приведенных выше и приведенных выше ответов и предлагать использовать абсолютное позиционирование вместе с псевдоклассом: before . Во многих приведенных выше примерах (и в аналогичных вопросах) используется настраиваемая разметка HTML, включая метод обработки Font 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 в шпаргалке Font Awesome . Просто используйте последние 4 буквенно-цифровых символа с префиксом обратной косой черты. Так []становится\f058

На их странице с примерами есть пример того, как использовать Font 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">

Также посмотрите причудливую публикацию Криса Койера о шрифтах значков на его веб-сайте CSS Tricks .

Вот его скринкаст , в котором рассказывается о том, как создать свой собственный значок font-face.

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

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

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

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

Спасибо.

Мое решение с использованием стандартного <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>

ДЕМО ЗДЕСЬ

В Font Awesome 5 это можно сделать с использованием чистого CSS, как в некоторых из приведенных выше ответов с некоторыми изменениями.

ul {
  list-style-type: none;
}

li:before {
  position: absolute;
  font-family: 'Font Awesome 5 free';
          /*  Use the Name of the Font Awesome free font, e.g.:
           - 'Font Awesome 5 Free' for Regular and Solid symbols;
           - 'Font Awesome 5 Brand' for Brands symbols.
           - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
          */
  content: "\f1fc"; /* Unicode value of the icon to use: */
  font-weight: 900; /* This is important, change the value according to the font family name
                       used above. See the link below  */
  color: red;
}

Без правильного начертания шрифта будет отображаться только пустой квадрат.

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define