Раньше когда создавали сайты иконки на сайт ставили как «обычно» через картинку, это был долгий и нудный процесс сначала нужно было сохранить из 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;
}
Все зависит только от вашей фантазии. На этом все, если возникнуть вопросы по поводу подключения и просто по поводу шрифтов пищите в комментариях.