A- A A+
Font Awesome

Font Awesome - бесплатный ресурс с постоянно пополняющимися иконками. В настоящее время коллекция состоит из 585 иконок, что в совокупности с возможностью придания им различных эффектов, позволяет такой коллекции найти применение на любом проекте.

Font Awesome

Шаг 1. Скачивание и подключение шрифта

По ссылке выше скачиваем архив и распаковываем в любое место на сайте, например в папку "images".

Font Awesome

Открываем в каталоге шаблона файл index.php и между отрывающим и закрывающим тегом <head> вставляем путь к файлу стилей:

<link rel="stylesheet" href="/images/font-awesome-4.4.0/css/font-awesome.min.css">
Font Awesome

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

Шаг 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>
Font Awesome

Проверяем результат.

Font Awesome

Шаг 4. Увеличение размера иконок

Размеры иконок можно увеличить от 33 процентов до 5-ти кратного размера путем добавления следующих классов: fa-lg (33%), fa-2x, fa-3x, fa-4x, fa-5x.

<span class="fa fa-bank fa-2x"></span>
Font Awesome
Font Awesome

Шаг 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>
Font Awesome
Font Awesome

Шаг 6. Вынесенные иконки

Для включения иконки в статьи или с целью выделения цитаты используются такие классы: fa-border, fa-pull-right, fa-pull-left:

<i class="fa fa-commenting-o fa-3x fa-pull-left fa-border"></i>Текст
Font Awesome
Font Awesome

Шаг 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>
Font Awesome
Font Awesome

Шаг 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>
Font Awesome
Font Awesome

Шаг 9. Совмещение иконок

Еще один чудесный эффект состоит в создании группы из иконок. Родительская иконка использует класс fa-stack. Класс fa-stack-1x задает стандартный размер иконки, а со значением fa-stack-2x увеличивает размер.

Font Awesome
Font Awesome

Чтобы изменить цвета, создайте свой класс со свойствами color и background. "Color" изменит цвет стандартного размера иконки (fa-stack-1x), а "background" окрасит увеличенную иконку.

Font Awesome

С такими возможностями трудно представить, что еще можно улучшить в представлении иконок на сайтах.

 

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!