FontAwesome и ещё 25 бесплатных иконочных шрифтов

На днях WPLift опубликовал большую подборку иконочных шрифтов (или шрифтовых иконок?) Не смог пройти мимо и хочу поделиться этой прекрасной коллекцией с читателями. Заодно покажу каким образом эти шрифты подключаются к Вордпресс.

Что такое иконочный шрифт

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

• Масштабирование без потери качества, это же обычный текст по-сути.
• Простая стилизация, как обычного текста.
• Поддержка всеми браузерами, включая очень старые.
• Относительно малый вес.

• Нельзя измененять геометрию иконок.
• Нельзя использовать несколько цветов внутри одной иконки.

Если это критично, значит лучше сразу перейти на формат SVG и не мучиться.

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

Зачем это нужно

Существуют исследования, которые доказывают, что использование иконок повышает юзабилити сайта, упрощает взаимодействие пользователя с интерфейсом сайта. Грамотно подобранные и уместно размещённые иконки — это всегда стильно, красиво и удобно.

Если вы ещё не используете на своем сайте иконки, самое время подобрать подходящую библиотеку и попробовать. Тем более, иконочные шрифты очень просты в использовании, легко подключаются к сайту.

Шрифты

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

Этот набор известен всем пользователям Вордпресс, именно Dashicons используются в оформлении админпанели платформы.

Набор из 320+ иконок от известной компании Themify. Бесплатный для личного и коммерческого использования.

Набор из 283 иконок со скругленными углами.

Бесплатный набор из 360 иконок различных направлений от Elegant Themes.

Набор стильных иконок.

Бесплатный набор из 266 иконок разной направленности, регистрация в сервисе открывает доступ к тысячам других иконок.

Бесплатный набор из 160 иконок широкого спектра применения от Ten by Twenty.

Коллекция из 300 бесплатных иконок в Metro-стиле.

Прекрасный набор иконок, можно подключить прямо из MaxCDN.

Специфический набор из 50 символов.

Большой бесплатный набор из 490 векторных иконок.

Пакет из 343 интересных иконок от Адама Уиткрофта.

Набор из 74 иконок социальных сетей.

Интересный набор иконок с привязкой к буквам.

Бесплатный набор из 411 премиум-иконок, имеется дополнение иконок социальных сетей.

Набор уникальных иконок от MFG Labs, разработанных для собственных нужд и впоследствии переданных в свободный доступ.

Бесплатный набор иконок.

80 бесплатных иконок, выполненных в очень интересном стиле, который сильно отличается от остальных.

Маленький набор из 30 забавных иконок.

Набор модных иконок в стиле минимализма.

Набор из 80 иконок.

Небольшой набор круглых иконок социальных сетей.

Отличный набор иконок для отображения географических объектов на картах Google Maps, например.

222 погодные иконки способны отобразить любое состояние погоды.

Универсальный набор из 336 шрифтовых иконок разных направлений.

Как подключить иконочный шрифт к Вордпресс

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

Отмечу наиболее известные:

Любители хендмейда могут без сторонних плагинов загрузить в свою тему любой шрифт и зарегистрировать шорткод, который будет выводить иконки. Покажу на примере Font Awesome.

Все операции производятся в файле functions.php активной темы или в специальном функциональном плагине.

Загружаем с MaxCDN актуальную на данный момент версию Font Awesome 4.7.0

Теперь в редакторе можно использовать шорткод [icon] с двумя переменными type и size, которые задают тип и размер иконки.

В результате должен генерироваться такой HTML-код

В заключение

В заключение хотелось бы еще раз отметить, что иконочные шрифты очень просты и удобны в использовании. Но в серьезных проектах все таки целесообразнее использовать SVG.

Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.