Font Awesome - бесплатный ресурс с постоянно пополняющимися иконками. В настоящее время коллекция состоит из 585 иконок, что в совокупности с возможностью придания им различных эффектов, позволяет такой коллекции найти применение на любом проекте.
Font Awesome
Шаг 1. Скачивание и подключение шрифта
По ссылке выше скачиваем архив и распаковываем в любое место на сайте, например в папку "images".
Открываем в каталоге шаблона файл index.php и между отрывающим и закрывающим тегом <head> вставляем путь к файлу стилей:
<link rel="stylesheet" href="/images/font-awesome-4.4.0/css/font-awesome.min.css">
При таком способе установки, все необходимые файлы находятся на сайте и при работе на локальном сервере, не нужно будет подключение к Интернету.
Шаг 2. Подключение с использованием Bootstrap CDN
Вставляем следующий код в <head>:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
Шаг 3. Использование иконок
Примеры иконок расположены на следующей странице:
Для вставки иконки необходимо ее код разместить в классе тегов span или i, а также перед названием иконки вставить префикс fa-.
<span class="fa fa-glass"></span>
Проверяем результат.
Шаг 4. Увеличение размера иконок
Размеры иконок можно увеличить от 33 процентов до 5-ти кратного размера путем добавления следующих классов: fa-lg (33%), fa-2x, fa-3x, fa-4x, fa-5x.
<span class="fa fa-bank fa-2x"></span>
Шаг 5. Иконки для маркированных списков
Для удаления в списках стандартных маркеров применяются классы fa-ul и fa-li.
<ul class="fa-ul"> <li><i class="fa-li fa fa-tags"></i>Теги</li> <li><i class="fa-li fa fa-tasks"></i>Задачи</li> <li><i class="fa-li fa fa-cogs"></i>Винтики</li> </ul>
Шаг 6. Вынесенные иконки
Для включения иконки в статьи или с целью выделения цитаты используются такие классы: fa-border, fa-pull-right, fa-pull-left:
<i class="fa fa-commenting-o fa-3x fa-pull-left fa-border"></i>Текст
Шаг 7. Вращающиеся иконки
Класс fa-spin вызывает вращение иконок.
Класс fa-pulse создает вращение каждые 8 шагов.
<button class="btn btn-default btn-lg"><i class="fa fa-refresh fa-2x fa-spin"></i></button> <button class="btn btn-default btn-lg"><i class="fa fa-cog fa-2x fa-spin"></i></button> <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-2x fa-pulse"></i></button>
Шаг 8. Поворот иконок
Повороты и зеркальные эффекты достигаются применением тегов fa-rotate-* и fa-flip-*. В первом случае указываются градусы, во втором - горизонтальное или вертикальное зеркальное отражение.
<i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class="fa fa-shield fa-flip-vertical"></i>
Шаг 9. Совмещение иконок
Еще один чудесный эффект состоит в создании группы из иконок. Родительская иконка использует класс fa-stack. Класс fa-stack-1x задает стандартный размер иконки, а со значением fa-stack-2x увеличивает размер.
Чтобы изменить цвета, создайте свой класс со свойствами color и background. "Color" изменит цвет стандартного размера иконки (fa-stack-1x), а "background" окрасит увеличенную иконку.
С такими возможностями трудно представить, что еще можно улучшить в представлении иконок на сайтах.