Блог «Дивасофт»

Несмотря на относительно давний релиз Font Awesome 5, руки его хоть сколько-нибудь обозреть дошли только сейчас.

Итак, что же такое Font Awesome и чем версия 4.7.0 отличается от 5?

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

Данный шрифт базируется на возможностях CSS и LESS.

Впервые Font Awesome показал себя миру 21 августа 2012 года и с тех пор прочно вошел в набор инструментов многих фронтенд разработчиков.

Шло время, шрифт набирал популярность, обновлялся, и, совсем недавно вышел релиз Font Awesome 5. Для того, чтобы его создать, команда разработчиков создала страницу на кикстартере и уже через месяц собрала сумму в 3 раза превышающую запрошенный бюджет.

Итак, 7 декабря 2017 года мир увидел обновленный Font Awesome. В чем же отличия от старой версии? Ну, во-первых, само количество иконок 946 бесплатных иконок (и +1 535 в Про-версии. Итого 2481 новых иконок) против 675 в версии 4.7.0. Кстати, введение Font Awesome 5 Pro-версии тоже стало нововведением. Отличием от бесплатной версии является более разнообразный дизайн уже имеющихся иконок. Появилось разделение на «толстые», «обычные» и «тонкие» символы. Во-вторых больше функций и возможностей. Но, обо всем поподробнее ниже.

Не смотря на релиз в декабре 2017 года, на момент написания статьи вышло уже несколько обновлений (Font Awesome 5.0.8). Шрифт до сих пор дорабатывается. Например, до сих пор налаживается поддержка для Android и iOS.

Подключается Font Awesome 5 так же, как и его младший собрат, то есть 2-мя способами: как сторонний подключаемый из вне компонент и как скачиваемый и внедряемый шрифт. Если вы имели дело с более ранними версиями, то с подключением нового Font Awesome у вас не будет проблем. Сохранилась функция изменения размера иконки непосредственно в ее теге. Например, при добавлении класса fa-sm вы получите иконку равную .875em. так же остались анимированные символы. А вот в отличие от предыдущих версий появились интересные функции Power Transforms, Masking и Layering, Text, & Counters.

Так что же в них интересного? Power Transforms позволяет как бы увеличивать и выносить иконку за пределы ее бэкграунда. Благодаря этому, создается эффект цельности фона и иконки. С помощью Masking можно одни иконки накладывать на другие. Layering, Text, & Counters в целом, выполняет те же функции, что и Masking, но с гораздо большим количеством иконок и их вариативностью расположения.

Поддержка осуществляется всеми браузерами начиная от IE 10 и IE 11 и заканчивая Яндексом в последних двух версиях.

Но, пожалуй, наиболее важным является возможность подключения Font Awesome как SVG и через JavaScript.

Обо всем этом, можно подробнее ознакомиться непосредственно на сайте Font Awesome 5

В целом, новая версия Font Awesome оставила приятное впечатление: как и прежде, простота в подключении, основной контент и набор самых распространенных иконок по-прежнему бесплатен, понятная документация в открытом доступе, приятный дизайн новых и редизайн старых иконок, больше возможностей для реализации всех творческих замыслов, удобный конструктор создания своих уникальных символов за счет функций Masking и Layering, Text, & Counters. Ну и конечно, совместимость с SVG и JavaScript.

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