Ответ 1
Решение:
ul li:before {
font-family: 'FontAwesome';
content: '\f067';
margin:0 5px 0 -15px;
color: #f00;
}
Здесь сообщение в блоге, которое объясняет эту технику всесторонне.
Использование значка шрифта 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, если это возможно.
Ответы
Ответ 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 алфавитномера с префиксом обратной косой черты. Итак, [] становится \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>
Ответ 7
Я использую http://icomoon.io/ Он дает вам возможность загружать только нужные значки шрифтов. Выберите нужные значки, прикрепите ключ к значку и загрузите небольшой шрифт, а не весь удивительный шрифт (который по-прежнему огромен).
Вот мой эксперимент: http://jsfiddle.net/Annett/ZB7TK/