Шрифты иконки от Font Awesome

Раньше когда создавали сайты иконки на сайт ставили как «обычно» через картинку, это был долгий и нудный процесс сначала нужно было сохранить из PSD как обычную картинку потом загрузить на сервер и подключить. Но к счастью нашлись люди которым этот процесс заколебал до беспредела и решили создать шрифт в котором были бы все необходимые иконки, и не приходилось бы подключать их как картинки.

Одним из таких шрифтов является шрифт Font Awesome, она содержит на данный момент 519 векторных иконок которые можно подключить в любом размере без потери качества благодаря векторной графике.

Векторные иконки Font Awesome

Как подключить шрифт Font Awesome ?

Для начала переходим по ссылке и скачиваем последнюю версию. После того как скачали открываем архив.

Содержание архива иконок шрифта

Заливаем на сервер сайта две папки из архива css и fonts потом подключаем файл стилей который находиться в папке css

<link rel="stylesheet" href="http://yoursite.ru/css/font-awesome.css" />

Все теперь мы подключили шрифты

Как вызвать шрифты на сайте ?

Чтобы вызвать необходимую иконку на сайте заходим на официальный сайт откуда и скачивали архив, выбираем необходимую иконку и нажимаем. В открывшейся странице вы увидите html код вызова шрифта.

<i class="fa fa-bed"></i>

все вы подключили шрифт вызвали иконку, теперь все? Нет не все. Так как это шрифт а не просто картинка вы можете через стили оформит их как следует, к примеру поменять цвет сделать тень и многое другое.

Стили для шрифта иконок такие же как и для обычных шрифтов

i.fa-bed {
   color: red;
   font-size: 50px;
   transition: 0.2s;
}

i.fa-bed:hover {
   color: orange;
   font-size: 55px;
}

Все зависит только от вашей фантазии. На этом все, если возникнуть вопросы по поводу подключения и просто по поводу шрифтов пищите в комментариях.