Шрифт с иконками Font Awesome. Примеры, как установить

В этой статье я максимально просто и доступно расскажу о том, что такое шрифт с иконками Font Awesome, как его установить и объясню несколько примеров применения.

Что такое шрифт Font Awesome?

Шрифт Awesome нужен для того, чтобы использовать иконки, не загружая при этом на сайт какие-либо изображения (подборки иконок и тд). Данный шрифт (в версии 4.1) включает в себя 441 иконку, которые становятся доступны при применении класса конкретной иконки для элемента. Но об этом позже. Ниже Вы можете увидеть малую часть примеров иконок:


Плюсы шрифта
- Бесплатно
- Простой доступ через CSS
- 441 иконка (в версии 4.1)
- Работает в IE
- Масштабируемость
- Отлично отображается в читалках и i-технике!
- Многие дизайнеры уже оценили и используют шрифт!

Как установить шрифт Font Awesome (с иконками)?

1. Скачиваем шрифт с сайта http://fontawesome.io/. Весит немного, примерно 400 Кб.

2. Копируем распакованные файлы в Ваш проект (например, где индексный файл). По названиям файлов скорее всего совпадений не будет с уже имеющимися, так как названия у них достаточно специфические.

3. Подключаем файлы в head Вашего проекта. Предлагаю два варианта - если лежит выше по директории и если в одной.

<link rel="stylesheet" href="../css/font-awesome.css">
<!-- либо -->
<link rel="stylesheet" href="css/font-awesome.css">

4. Используем шрифт. Смотрим пример ниже:

<i class="fa fa-camera-retro"></i> Иконка фото
<i class="fa fa-check-square"></i> Иконка Check/Галочка

Примеры шрифт Font Awesome

Допустим идёт проработка каких-либо действий по списку:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>Готово</li>
  <li><i class="fa-li fa fa-check-square"></i>Готово</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>Загружается</li>
  <li><i class="fa-li fa fa-square"></i>Ожидание</li>
</ul>

Иконки ожидания:

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

Цитата:

<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
Как жаль, что не дано 
Нам вовремя понять, 
С кем можем мы найти, 
А с кем лишь потерять…

Поворачиваем иконки:

<i class="fa fa-paper-plane"></i> normal
<i class="fa fa-paper-plane fa-rotate-90"></i> fa-rotate-90
<i class="fa fa-paper-plane fa-rotate-180"></i> fa-rotate-180
<i class="fa fa-paper-plane fa-rotate-270"></i> fa-rotate-270
<i class="fa fa-paper-plane fa-flip-horizontal"></i> fa-flip-horizontal
<i class="fa fa-paper-plane fa-flip-vertical"></i> icon-flip-vertical

Демонстрация Скачать исходники
Смотрим примеры!