Font Awesome: полное руководство по библиотеке

Бесплатные иконки Font Awesome: что это и для чего используется. Как подключить значки на сайт. Преимущества и недостатки библиотеки.

Набор иконок Font Awesome: подробное руководство

Font Awesome — это набор шрифтов и иконок, которые базируются на CSS и Less. Инструмент позволяет быстро подключить на сайт всевозможные значки, существенно улучшив его дизайн и юзабилити. Достаточно вставить несколько строк кода.

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

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

В FontAwesome все значки абсолютно и полностью бесплатны. Библиотека поддерживает лицензию GNU GPL (GNU General Public License). Это значит, что его можно беспрепятственно использовать в коммерческих проектах и в принципе везде.

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

Обычно скрипты шрифтов Font Awesome используют вместе с Bootstrap и BootstrapCDN. По популярности Font Awesome занимает второе место после Google Fonts.

Как это работает

Главная особенность заключается в том, что все иконки Font Awesome — это не статические изображения. Они имеют шрифтовый формат. Другими словами, это иконочные шрифты. Например, значок поиска или логотип социальной сети — это то же самое, что и простые символы «A», «B», «C».

Значки Font Awesome создаются с использованием масштабируемых векторов. Поэтому их можно увеличивать практически до любого размера.

Все доступные значки включены в один шрифтовый файл. Все что нужно — скачать этот файл с официального сайта и подключить в стилях.

Почему дизайнеры выбирают Font Awesome

У Font Awesome есть ряд преимуществ:

• Быстрое подключение. Достаточно просто скачать специальный файл с официального сайта и подключить его, указав путь к нему в коде CSS.
• Гибкость и масштабируемость. Значки можно увеличить до любого размера. Символы будут настолько четкими, насколько позволяет то или иное устройство. В эпоху адаптивного дизайна это важно. Кстати, по этой же причине иконки Font Awesome подходят для Retina-дисплеев.
• Стилизация. У иконок легко изменить цвет, размер, тень или любые другие внешние параметры. Дизайнер получает все преимущества стилизации обычного текста. А еще значки можно вращать. Например, отобразить вверх ногами или повернуть на 90 градусов.
• Быстрая загрузка сайта. Все значки включены в один файл шрифта. Так что для подгрузки Font Awesome требуется лишь один HTTP-запрос. Это прекрасно сказывается на производительности сайта.
• Любовь браузеров. Font Awesome — кроссбраузерный инструмент. Не придется беспокоиться о совместимости шрифтов и иконок с браузером. Они хорошо поддерживаются всеми из них. Даже стареньким IE8.
• Совместимость с разными фреймворками. Библиотека создавалась в первую очередь для Bootstrap. Однако она будет отлично совмещаться и с другими фреймворками.
• Несколько форматов. Инструмент доступен в форматах .eot, .ttf, .woff и svg. Так что Font Awesome обрабатывается так же, как и другие веб-шрифты.
• Отсутствие необходимости в JavaScript. Для работы Font Awesome не требуется JavaScript.

Таким образом, Font Awesome — это эффективный и удобный инструмент, который существенно экономит время верстки и ускоряет работу сайта.

Недостатки Font Awesome

У инструмента есть и недостатки. К счастью, их немного.

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

Во-вторых, библиотека Font Awesome содержит слишком много иконок и все они включены в один файл. Если дизайнеру или верстальщику нужно подключить всего пару значков, все равно придется загружать всю библиотеку полностью. А это сотни тысяч лишних значков, которые будут занимать место. Однако и здесь есть решение — создание собственной сборки, в которую будут включены только необходимые иконки.

Версии Font Awesome: 5 и 6

Font Awesome 5 был выпущен 7 декабря 2017 и изначально содержал 1278 значка. Пятая версия поставляется в двух пакетах: в бесплатном (Font Awesome Free) и в платном (Font Awesome Pro). В бесплатном тарифном плане также имеются значки из всех четвертых версий.  Значки доступны по лицензиям SIL Open Font License 1.1, Creative Commons Attribution 4.0, а также MIT.

Font Awesome 6 — это новая версия, которая вышла в свет во второй половине 2020 года. Она включает новые значки и доступна только в платном тарифе.

В 2021 году также готовится выход версии Font Awesome 6 Alpha. Это еще одно новое поколение библиотеки иконок. Помимо новых значков, в версии 6 Alpha также добавлены новые стили, новые услуги и вспомогательный инструментарий. Пользователи могут оформить предзаказ.

Бесплатный и платный планы: отличия и особенности

Скачать значки можно по бесплатному или платному тарифному плану.

Бесплатный тариф включает более 1600 иконок и 1 комплект. Комплект — это набор значков, стилей и настроек, который позволяет быстро вносить изменения без добавления кода.

Платный тариф:

• Включает более 7800 иконок и 20 комплектов.
• Предоставляет доступ к Font Awesome Pro. Это значит, что значки можно будет использовать в собственных мобильных приложениях и на компьютере (например, в текстовом редакторе Word или при создании презентации в Powerpoint).
• Позволяет загружать свои собственные иконки. Свои собственные значки можно использовать наравне с официальными иконками Font Awesome либо вместо них. Например, так можно загрузить логотип компании. С собственными значками можно совершать те е действия, что с базовыми — менять стиль, размер, цвет и т. д.

Обе версии являются бессрочными. То есть предоставляются один раз и навсегда.

Способы подключения Font Awesome

В первую очередь нужно зайти на официальный сайт и скачать библитотеку. Скачанный архив необходимо распаковать и скопировать папки css и fonts в папку своего сайта.

После этого между тегами head указывается путь к файлу библиотеки. Например: 

Как отобразить иконки Font Awesome на сайте. Наиболее популярные методы:

1. С помощью HTML

Самый простой способ.

Необходимо зайти в галерею на официальном сайте (fontawesome.com/icons?d=gallery) и выбрать понравившуюся иконку. У каждой иконки есть персональный код, например: . Достаточно его скопировать и вставить в нужное место в коде.

2. Через CSS

Для этого используют псевдоэлементы after или before, а также Unicode необходимого значка. Его можно взять все в той же галерее. Пример такого кода: f209.

Пример записи в файле стилей:

div::after {display: block; content: 'f209'; font-family: 'Font Awesome 5 Free';}

В заключение: все иконки Font Awesome

Таким образом, Font Awesome — быстрый и удобный способ добавить на сайт бесплатные иконки. Все значки легко масштабируются и не замедляют работу сайта.