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

Question

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

мы хотели бы иметь возможность использовать шрифт 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 требует другого атрибута семейства шрифтов, который бы требуется отдельный элемент.

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

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

736 7

css font-awesome

7 ответов:

Comments

Ничего не найдено.

Inluxc · Accepted Answer · 2015-11-20 18:40:09

устранение:

http://jsfiddle.net/VR2hP/
li:before {    
font-family: 'FontAwesome';
content: '\f067';
margin:0 5px 0 -15px;
color: #f00;
}
здесь блоге что объясняет эту технику в глубине.

lol · Accepted Answer · 2018-06-07 04:42:06

новый fontawesome (версия 4.0.3) делает это очень легко сделать. Мы просто используем следующие классы:
<ul class="fa-ul">
 <li>List icons (like these)</li>
 <li>can be used</li>
 <li>to replace</li>
 <li>default bullets in lists</li>
</ul>
согласно этому (новому) url:http://fontawesome.io/examples/#list

Ryan · Accepted Answer · 2014-09-01 12:01:06

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

cereallarceny · Accepted Answer · 2012-09-18 02:31:11

есть пример того, как использовать шрифт Awesome вместе с неупорядоченным списком на их примеры страницы.
<ul class="icons">
 <li> Lists</li>
 <li> Buttons</li>
 <li> Button groups</li>
 <li> Navigation</li>
 <li> Prepended form inputs</li>
</ul>
Если вы не можете найти его работу после попытки этого кода, то вы не включаете библиотеку правильно. Согласно их веб-сайту, вы должны включить библиотеки как таковые:
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">
также проверьте причудливый сообщение Криса Койера о шрифтах значков на сайте CSS Трюки.

вот скринкаст Он также говорил о том, как создать свой собственный значок шрифта.

Ricardo Zea · Accepted Answer · 2017-05-23 13:31:37

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

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

другими словами, вы можете выполнить то, что вам нужно, используя ту же базовую разметку, которую вы упомянули в своем первоначальном сообщении:
<ul>
 <li>...</li>
 <li>...</li>
 <li>...</li>
</ul>
спасибо.

Marconi · Accepted Answer · 2018-04-10 20:54:11

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

ДЕМО ЗДЕСЬ

Annett · Accepted Answer · 2012-10-15 05:23:05

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

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