Font Awesome - шрифтовые икнонки в современном дизайне

Иконки в современном дизайне отыгрывают значительную роль. Они помогают сделать функциональные блоки сайта интуитивно понятными, наглядными и компактными.

Есть несколько разных подходов в использовании  иконок на сайте:

1. Загрузка каждой иконки в виде отдельного файла – это весьма затратный метод, который мало того, что не дает гибкости в изменении той же цветовой схемы всех иконок, но еще и увеличивает время загрузки сайта за счет дополнительных запросов (к файлам картинок) на сервер.

2. Создание одного файла для всех иконок сайта. Реализовать иконки через спрайт файл – это уже более выгодный подход относительно скорости загрузки картинок введу всего одного запроса на сервер. Но если придется что-то изменить, то этот вариант также будет не самым благоприятным.

3. Использования шрифта с иконками. На мой взгляд - самый комфортный вариант решения, как для верстальщика, так и для клиента.  Шрифт с иконками дает нам широкие возможности по изменению цвета и размера самих иконок, а так же сам процесс правок достаточно прост.

В этом посте мы рассмотрим шрифт FontAwesome, который поддерживает более 500 иконок.

Как подключить шрифт FontAwesome в своем дизайне?

Во многих дизайнах платформы Gollos, уже подключен шрифт FontAwesome.  Проверить это можно перейдя в раздел «Мета теги» текущего дизайна.

И если есть строка вида:

То значит шрифт уже подключен, а если такой строки вы у себя не находите, то просто добавляем ее:

1) Вводим строку типа CSS, со значением: http://cdn.gollos.com/common/css/awesome/403/font-awesome.css

2) Жмем на кнопку «Сохранить»

Супер! Шрифт мы подключили, теперь давайте разберемся, как его использовать :)

Как использовать шрифтовые иконки в своем дизайне?

Использовать иконки достаточно просто.

1) Переходим на сам сайт шрифта - http://fortawesome.github.io/Font-Awesome/icons/

2) Выбираем понравившуюся иконку, нажав по ней мышкой

3) На странице иконки, копируем ее HTML код

4) Вставляем скопированный код в нужном месте, например перед заголовком блока меню в футере:

4.1 Переходим на страницу «Разметки дизайна» текущего шаблона

4.2 Прокручиваем код страницы почти в самый низ и вставляем код выбранной иконки

5) Вот что получилось в результате

Как мы видим, вставка иконок в шаблон сводится к банальному копированию, что может быть проще :)

Таким же образом Вы можете менять уже существующие иконки в вашем шаблоне, просто заменив название класса иконки в коде.