Font Awesome: векторные иконки в стиле Bootstrap

Вернуться
Опубликовано: 24.04.2015 г.

Каждый веб-разработчик время от времени сталкивается с работой с иконками. В современных интерфейсах графические элементы занимают важное место – это и значки социальных сетей, и указатели, и другие части сайта. В зависимости от ресурса, иконок может быть на сайте от 5-6 до нескольких десятков. Проблемы работы с ними всем известны: сначала нужно подобрать подходящий набор, после чего собрать их в сетку-спрайт, рассчитать местоположение каждой из них… Словом, на работу с иконками может пойти куда больше рабочего времени, чем занимает вся остальная разработка. Кроме того, эта работа довольно нудная и требующая повышенного внимания. Понятно, что такое положение дел не устраивало разработчиков, и была изобретена альтернатива – иконочные шрифты. Об одном из них – Font Awesome – и пойдёт речь.

Отличия векторных иконок от растровых

Как известно, все современные шрифты содержат начертания символов в векторе. Не исключение и иконочные шрифты. Чтобы понять разницу между векторной картинкой и растровой (любое изображение в форматах PNG, GIF или JPEG) достаточно просто увеличить или уменьшить их размеры. Векторные картинки масштабируются профессионально и без возникновения каких-либо артефактов. А на растровых возникают «лесенки», пикселизация, теряется четкость. Поэтому преимущество использования векторной графики для иконок и других мелких элементов становится очевидным.

Шрифт Font Awesome и его особенности

Автор шрифта Дэйв Ганди при разработке Font Awesome постарался учесть все недостатки и особенности существующих на тот момент шрифтов, поэтому результат получился отличным и сразу полюбился многим дизайнерам и веб-разработчикам. Тем более, что значки нарисованы в стиле очень популярного фреймворка Twitter Bootstrap, на основе которого созданы тысячи сайтов. Среди преимуществ Font Awesome стоит отметить:

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

Как установить Font Awesome и начать использовать

Для подключения шрифта к своему проекту нужно выполнить несколько простых действий. Прежде всего, нужно скачать с официального сайта проекта Font-Awesome сам шрифт в архиве и распаковать его. После этого подключение зависит от того, используете ли вы Twitter Bootstrap в своем проекте или нет. Если используете, то копируйте папку со шрифтом в корень вашего сайта или в папку с другими шрифтами, отдельно нужно также скопировать файл font-awesome.min.css в папку, где лежат все стили. Если это требуется, поправьте в пути к файлам шрифта. После этого остается только добавить в тег <head> после подключения Bootstrap аналогичную строку для подключения Font Awesome:

<link rel="stylesheet" href="../styles/bootstrap.min.css">

<link rel="stylesheet" href="../styles/font-awesome.min.css">

Если же Bootstrap не используется, подключение происходит почти точно так же – папка со шрифтами добавляется в проект, также добавляется файл font-awesome.less или font-awesome.min.css в папку со стилями, и после этого дается ссылка при помощи директивы <link>, как в предыдущем примере.

Всё, теперь шрифт можно использовать в верстке. Делается это также очень просто – добавлением класса к элементу, к которому нужно добавить иконку:

<i class="fa fa-camera-retro"></i>

Этому классу, как и любому другому, можно через CSS задать все требуемые параметры – цвет, размер, начертание и т.д., словом, всё, что доступно для оформления шрифтов. Таким образом, разработчику не понадобится получать какие-то дополнительные навыки – только стандартные операции со шрифтами. Это еще один плюс использования Font Awesome в проектах.

5687 0

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *