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


131

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

Ответы:


248

Решение:

http://jsfiddle.net/VR2hP/

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

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


18
Полезный список переводов этих отличных шрифтов значков в значения css находится здесь: astronautweb.co/snippet/font-awesome
Скотт Уилсон,

24
Вы захотите включить это, чтобы удалить пункты ul { list-style-type: none; }
списка

Почему этот метод не работает, когда у меня есть два списка на одной странице?
deKajoo 08

6
Очень хорошо, единственное, что я бы посоветовал, чтобы выровнять вещи лучше, - это margin: 0 0.2em 0 -1.2em;просто увеличить / уменьшить два значения на одинаковую величину, чтобы получить желаемый интервал. Если вы используете фиксированное значение пикселя, которое не соответствует вашему шрифту, вы заметите несоответствие в элементах многострочного списка.
тормозит

Я добавил к нему префикс ul, иначе он бы попытался сделать это, если бы клиент использовал cms для создания упорядоченного (пронумерованного) списка
rtpHarry

154

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


12
Это должен быть правильный ответ с новой версией fa. Очень хорошо сделано, спасибо за это объяснение.
Дэвид

23
Я не согласен, вопрос был задан для решения с использованием единого списка на чистом CSS. Это использует дополнительный HTML, а также классы. Хотя это определенно то, как это указывается в документации FA, технически это не является решением вопроса и бесполезно, если вы хотите сделать это без изменения вывода HTML.
Райан

Я знаю, что вы собираетесь делать - но люди, которые не пишут постоянно чистый CSS в ситуациях, когда они не могут изменить свой HTML ???? (серьезно, пожалуйста, посмотрите на изменение вашей веб-структуры) потребуется обновление памяти их запросов Google, чтобы связать их с «правильным» шрифтом, удивительным способом документов, сопоставленным с «фактическим» ответом, рядом друг с другом, чтобы решить. Я не хочу сказать «нет единственного правильного ответа на проблему», но нет ...
lol

1
Этот подход не работает с элементами списка, переносящимися на несколько строк, поскольку идентификация на дополнительных строках не будет расширяться, чтобы включить ширину значка.
Ларс Хаугсет

2
Вероятно, стоит добавить, что в FA 4.3 (возможно, и в других версиях) и Bootstrap 3 необходимо установить элементы ulи, поскольку элемент позиционируется абсолютным. В противном случае все они всплывут в левый верхний угол. liposition: relativefa-li
Джереми Харрис,

14

Я хотел бы опираться на некоторые из приведенных выше и приведенных выше ответов и предлагать использовать абсолютное позиционирование вместе с псевдоклассом: 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 буквенно-цифровых символа с префиксом обратной косой черты. Так [&#xf058;]становится\f058


4

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


2
Дополнительная разметка не требуется: li:beforeсемейство шрифтов может отличаться от самого liсебя.
cimmanon

@cimmanon: Хотя вы действительно правы, документация по Font Awesome предлагает вам использовать дополнительную разметку. Технически в этом нет необходимости, однако я чувствую, что может потребоваться немного покопаться в глифах шрифта, чтобы выяснить, какая клавиша сопоставлена ​​с каким символом. Это потребует времени и терпения, но, конечно же, ваше решение тоже подойдет.
cereallarceny

@cereallarceny - проблема в том, что редактор HTML (TinyMCE) для CMS создает формат, который я указал в своем вопросе. Таким образом, с этой точки зрения у нас нет контроля над списком HTML. Если мы не настроим TinyMCE для включения элемента i (а не удаления его как пустого элемента).
BaronGrivet

Итак, у вас нет доступа к HTML, у вас есть доступ к CSS?
cereallarceny

Да, полный доступ к CSS.
BaronGrivet

1

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

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

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

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

Спасибо.


1

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

введите описание изображения здесь

ДЕМО ЗДЕСЬ


1

В 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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.