Font awesome векторные иконки. Подключение
Font awesome — библиотека кастомизируемых векторных иконок. С помощью CSS вы с легкостью можете настроить цвет, размер, тень и многое другое.
Подключение
Скачайте архив с Font awesome (тут). На сервере сайта создайте 2 папки (если их нет): css и fonts. В css добавьте файл из архива font-awesome.min.css, а в fonts содержимое папки fonts скаченного архива.
В шапке фала index.html подключите загруженный css
|
1 |
<link href="css/font-awesome.min.css" rel="stylesheet"> |
Использование Font awesome
Для внедрения иконки в документ необходимо сделать 2 простые вещи:
- Выбрать иконку с сайта, открыть страницу иконки и скопировать её код (тег <i>)
- Вставить код в документ
Иконки Font awesome с фиксированной шириной
Для задания фиксированной ширины иконки добавите класс fa-fw. Это очень удобно при создании вертикально списка
|
1 |
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-address-book fa-fw"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span> |
Иконки Font awesome для маркированного списка
Вы можете заменить стандартные иконки маркированного списка на собственные. Для этого используйте классы fa-ul и fa li.
|
1 2 3 |
<ul class="fa-ul"> <i class="fa-li fa fa-address-book" aria-hidden="true"></i> </ul> |
Анимация иконок Font awesome
Добавьте классы fa-spin, fa-pulse, fa-spinner, fa-refresh или fa-cog, чтобы установить вращающиеся иконки. Анимация не поддерживается в IE8 — IE9.
|
1 |
<i class="fa fa-address-book fa-spin" aria-hidden="true"></i> |
Возможно, вам будет интересно:
