Таблица значений иконок Font Awesome. Как использовать иконки Font Awesome
Таблица значений иконок Font Awesome. Как использовать иконки Font Awesome?
Font Awesome - что это?
Font Awesome - это набор готовых масштабируемых иконок для сайта. Иконки Font Awesome можно добавлять на сайт, как обычный текст и через CSS. Это даёт возможность изменять цвет, шрифт, тень иконок и многое другое. Для использования на своём сайте иконок Font Awesome необходимо подключить файл стилей иконок.
Файл стилей иконок Font Awesome подключается в главном файле сайта между тэгами < head > и < / head >:
После того, как файл стилей подключен, можно использовать иконки на своем сайте.
Как использовать иконки Font Awesome на сайте:
1. Можно использовать в текстовом редакторе сайта использовав название иконки:
Можем увеличить размер иконки добавив классы: fa-lg, fa-2x, fa-3x, fa-4x или fa-5x
Пример добавления класса для увеличения иконки Font Awesome:
fa-lg fa-2x fa-3x fa-4x fa-5xДелаем иконки с фиксированной шириной
Используя класс fa-fw можно зафиксировать ширину иконки. Используется для создания меню с иконками.
Использование иконок в маркированном списке.
Классы fa-ul и fa-li заменяют маркеры по умолчанию в < ul >...< /ul >
- элемент списка
- элемент списка
- элемент списка
Анимация иконок Font Awesome.
Добавив классы fa-spin, fa-pulse, fa-spinner, fa-refresh или fa-cog сделаем вращающиеся иконки. Анимация не поддерживается в IE8 — IE9.
2. Иконку Font Awesome можно добавить в таблице стилей CSS:
Используя псевдокласс :before иконку можно добавить перед текстом, а при помощи псевдокласса :after иконка добавится после текста.
В параметре контент указываем не название иконки а её код.
Таблица значений иконок Font Awesome
Поделитесь материалом с друзьями!
Добавить комментарий