Я задаюсь вопросом, можно ли использовать классы font-awesome (или любой другой иконический шрифт) для создания настраиваемого <li>
типа стиля списка?
В настоящее время я использую jQuery для этого, то есть:
$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");
Тем не менее, это не работает должным образом, когда <li>
текст переносится по странице, так как считает значок частью текста, а не фактическим маркером-маркером.
Какие-нибудь советы?
источник
font-weight: 900;
Согласно Font Awesome Документация :
Или, используя Jade:
источник
<ul class="fa-ul"><li class="h4"><font-awesome-icon icon="check" /> ...
Я хотел бы предложить альтернативное, более простое решение, специфичное для FontAwesome. Если вы используете другой иконический шрифт, ответ JOPLOmacedo по-прежнему идеально подходит для использования.
FontAwesome теперь обрабатывает стили списков внутренне с помощью классов CSS .
Вот официальный пример:
источник
Я хотел добавить к ответу JOPLOmacedo. Его решение - мое любимое, но у меня всегда были проблемы с отступом, когда в li было больше одной строки. Было трудно найти правильный отступ с полями и т. Д. Но это может касаться только меня.
Для меня абсолютное позиционирование
:before
псевдоэлемента работает лучше всего. Я установилpadding-left
на ul, отрицательная позиция слева на:before
элементе, так же, как ulpadding-left
. Чтобы получить расстояние содержимого от:before
элемента вправо, я просто установилpadding-left
на li. Конечно, ли должен иметь относительную позицию. НапримерНадеюсь, это понятно и имеет значение для кого-то другого, кроме меня.
источник
Я сделал это так:
Или вы можете попробовать это, если вы хотите изменить цвет:
источник
Я сделал две вещи, вдохновленные комментарием @OscarJovanny, с некоторыми взломами.
Шаг 1:
Шаг 2:
Полученные результаты
источник