Font Awesome: бесплатный иконочный шрифт в стиле Twitter Bootstrap.

Каждому разработчику шаблонов периодически приходится сталкиваться с нудной работой над детализацией интерфейса создаваемого шаблона — иконками. Это могут быть, как иконки социальных сетей, так и интуитивная графика для обозначения времени создания материала, полей ввода логина и пароля, оформления кнопок визуального редактора и т.д. Сайт может содержать в себе несколько десятков подобных изображений. Которые нужно правильно оптимизировать, собрать в спрайт-сетку, затем вычислить положение каждого изображения сетки, затем спозиционировать его в качестве фонового изображения к каждому элементу. Зачастую эта кропотливая и нудная работа занимает больше времени, чем верстка всего шаблона в целом.

Работа с иконочными шрифтами технически напоминает работу с глифами. По сути это и есть глифы, но выполненные в едином современном стиле. Графические иконки сайта обычно выполнены в растровых форматах (.png, .gif, .jpg), которые сами по себе ограничены. Достаточно сложно сменить размер крупного растрового изображения до миниатюрости иконки так, чтобы картинка не потеряла своего качества. Пикселизация, ступеньки градиентов, смешение пиксекей и т.д. — это все растровые форматы. Но здесь нам на помощь приходит векторная графика. Шрифты — это вектор в чистом виде. Который можно увеличивать и уменьшать бесконечно, но при этом векторная картинка не потеряет своего качества и цветов.

Font Awesome, разработанный Дэйвом Ганди (Dave Gandy), выполнен в стиле глифовTwitter Bootstrap. На сегодняшний день коллекция Awesome содержит уже 220 иконок и постоянно пополняется новыми элементами. Из особенностей:

• Скриншот и описание элементов в PDF.
• Пиктография, применяемая в web.
• Обратная совместимость с Twitter Bootstrap 2.0.
• Сообщество на Font Awesome GitHub project.
• Бесплатен для коммерческого использования.
• Управление через CSS.
• Поддержка IE 7+.
• Поддерживает мобильные браузеры.
• Неограниченная масштабируемость.

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

Работать с Font Awesome достаточно просто:

1. Качаем архив.
2. Копируем шрифты из архива в проект.
3. Добавляем в наш css @import «font-awesome.css»; и @import «font-awesome-ie7.css»;
4. Ниже:

@font-face {
    font-family: 'FontAwesome';
    src: url('../font/fontawesome-webfont.eot');
    src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/fontawesome-webfont.woff') format('woff'),
    url('../font/fontawesome-webfont.ttf') format('truetype'),
    url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
    font-weight: normal;
    font-style: normal;
    }

Далее добавляем к нужным нам элементом путем добавления класса css.

<i class="icon-glass"></i>

Справится даже новичок. Все это дело работает на вполне обычных элементах CSS, которые мы  с Вами применяем практически в каждом проекте.

[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
.icon-glass:before { content: "\f000"; }

И далее мы можем изменять внешний вид иконок средствами форматирования текста CSS: color, font-size, font-style и т.д., в зависимости от стилевых требований шаблона.

Сейчас Font Awesome взят на вооружение в демо-шаблоне Gantry. Вполне можно быть, что данный иконочный шрифт в будущем будет использован JUI.