Как правильно использовать Font Awesome в списках?

Question

[Роман]

Дизайнер использует для оформления списка Font Awesome. Т.е. вместо маркера идет иконка.
Как правильно оформить список?
Только так?

<ul>
  <li>
    <i class="fa fa-chevron-right" aria-hidden="true"></i>
    <p>Текст</p>
  </li>
</ul>

Answer 1

[iBird Rose]

да. это самый нормальный способ.
также можно ставить через before к примеру для li. но тогда придется самому стили указывать для нужной иконки. а не через классы

Comments

[Роман]

А если ставить через before, то что вставляем в content: "" ?

[iBird Rose]

Роман: в зависимости от нужной иконки. посмотри как сделаны иконки у Font Awesome. у них есть свой before. вот тебе придется эту иконку делать самому.

[Ankhena]

Роман: Нужна вам, например, иконка с лупой. Обычно бы написали: fa fa-search
Значит откройте fontawesome.css и посмотрите какой content стоит у класса fa-search. Его и пишете для li:before.

Либо эти классы fa fa-search применяете к li

[Роман]

Ankhena W: если бы вам сдавали проект и там список был бы оформлен не через before, а как я написал код в вопросе. Послали бы переделывать?)

[Ankhena]

Роман: Зависит от CMS и дальнейшей судьбы этого списка.
Если окажется, что это пользователю потом придется при добавлении пункта в список еще и i вставлять, то прибила бы верстальщика.
Если нет или к каждому пункту все равно нужна своя иконка, тогда нормально.

Абстрактно: не люблю лишние теги и предпочла бы применение к li, но и переделывать бы не отправила.