WD5 - разработка сайтов

Применение FontAwesome к списку элементов

Задача - к списку ul li - применить однотипную иконку, например стрелку вправо ">".

Изменить исходный код шаблона сайта не всегда возможно, по разным причинам, например не понимание работы xsl шаблонизатора или особенности cms. Доступ к изменению css есть почти всегда.

По умолчанию для того, чтобы применить данный символ мы должны использовать примерно такую конструкцию.

<i class="fa fa-angle-right" aria-hidden="true"></i>

Но мы можем ее заменить, использовав символьный код \f105 шрифта FontAwesome.

Пример, для реальной задачи добавить свой класс ограничитель, иначе примениться ко всем спискам на сайте.

ul li::before {
    content: "\f105";
    position: absolute;
    top: 10px;
    left: -15px;
    font-family: FontAwesome;
}

Загрузить шрифт можно с сайта http://fontawesome.io/

Подключение в шаблоне

<link href="templates/font-awesome/css/font-awesome.min.css" rel="stylesheet">
Яндекс.Метрика