На днях WPLift опубликовал большую подборку иконочных шрифтов (или шрифтовых иконок?) Не смог пройти мимо и хочу поделиться этой прекрасной коллекцией с читателями. Заодно покажу каким образом эти шрифты подключаются к Вордпресс.
- Что такое иконочный шрифт
- В чем плюсы
- Зачем это нужно
- Font Awesome
- Dashicons
- Themify Icons
- Foundation Icon Fonts 3
- Elegant Icon Font
- Dripicons
- Pictonic
- Sosa
- Metrize Icons
- Ionicons
- Symbol Signs
- Icomoon
- Batch
- Socialico
- Raphaël Icon-set
- Entypo
- MFG Labs Icon Set
- Ligature Symbols
- PW Drawn Icon Font
- Fontelico
- Feather Icon Set
- Premium Pixels
- Rondo Social Icon Font
- Map Icons
- Weather Icons
- Typicons
- Как подключить иконочный шрифт к Вордпресс
- Без плагинов
- Подключение шрифта
- Регистрация шорткода
- 25 Beautiful Icon Fonts for Web Designers
- 30 бесплатных иконочных шрифтов
- 18 Best Free Icon Fonts for Graphic Design Projects
- Dashicons — официальный Icon Font от WordPress (197 иконок)
- Devicons — Icon Font для разработчиков (123 иконок)
- Solid Icons (210 иконок)
- 77 Essential Icons (77 иконок)
- Tonicons Outline Icons (200 иконок)
Что такое иконочный шрифт
Иконочный шрифт — это обычный шрифт, у которого вместо привычных букв и цифр разные символы, пиктограммы, глифы. Такие шрифты часто подключают к сайтам и используют символы в качестве иконок.
В чем плюсы
Если это критично, значит лучше сразу перейти на формат SVG и не мучиться.
В целом же иконочные шрифты сильно упрощают процесс разработки, позволяют очень быстро ввести и задействовать в интерфейсе массу полезных символов.
Зачем это нужно
Существуют исследования, которые доказывают, что использование иконок повышает юзабилити сайта, упрощает взаимодействие пользователя с интерфейсом сайта. Грамотно подобранные и уместно размещённые иконки — это всегда стильно, красиво и удобно.
Если вы ещё не используете на своем сайте иконки, самое время подобрать подходящую библиотеку и попробовать. Тем более, иконочные шрифты очень просты в использовании, легко подключаются к сайту.
Font Awesome
Лидер среди иконочных шрифтов, включает в себя более 675 различных иконок. Изначально был разработан для Bootstrap, но прекрасно работает с любыми другими фреймворками.
Dashicons
Этот набор известен всем пользователям Вордпресс, именно Dashicons используются в оформлении админпанели платформы.
Themify Icons
Набор из 320+ иконок от известной компании Themify. Бесплатный для личного и коммерческого использования.
Foundation Icon Fonts 3
Набор из 283 иконок со скругленными углами.
Elegant Icon Font
Бесплатный набор из 360 иконок различных направлений от Elegant Themes.
Dripicons
Набор стильных иконок.
Pictonic
Бесплатный набор из 266 иконок разной направленности, регистрация в сервисе открывает доступ к тысячам других иконок.
Sosa
Бесплатный набор из 160 иконок широкого спектра применения от Ten by Twenty.
Metrize Icons
Коллекция из 300 бесплатных иконок в Metro-стиле.
Ionicons
Прекрасный набор иконок, можно подключить прямо из MaxCDN.
Symbol Signs
Специфический набор из 50 символов.
Icomoon
Большой бесплатный набор из 490 векторных иконок.
Batch
Пакет из 343 интересных иконок от Адама Уиткрофта.
Socialico
Набор из 74 иконок социальных сетей.
Raphaël Icon-set
Интересный набор иконок с привязкой к буквам.
Entypo
Бесплатный набор из 411 премиум-иконок, имеется дополнение иконок социальных сетей.
MFG Labs Icon Set
Набор уникальных иконок от MFG Labs, разработанных для собственных нужд и впоследствии переданных в свободный доступ.
Ligature Symbols
Бесплатный набор иконок.
PW Drawn Icon Font
80 бесплатных иконок, выполненных в очень интересном стиле, который сильно отличается от остальных.
Fontelico
Маленький набор из 30 забавных иконок.
Feather Icon Set
Набор модных иконок в стиле минимализма.
Premium Pixels
Набор из 80 иконок.
Rondo Social Icon Font
Небольшой набор круглых иконок социальных сетей.
Map Icons
Отличный набор иконок для отображения географических объектов на картах Google Maps, например.
Weather Icons
222 погодные иконки способны отобразить любое состояние погоды
Typicons
Универсальный набор из 336 шрифтовых иконок разных направлений.
Как подключить иконочный шрифт к Вордпресс
Некоторые популярные шрифты подключаются к Вордпресс в виде плагинов. Суть большинства из них сводится к банальной загрузке шрифта и регистрации шорткода, который будет отвечать за вывод. Я не буду перечислять все имеющиеся на данный момент в репозитории плагины — это тема отдельной статьи.
Без плагинов
Любители хендмейда могут без сторонних плагинов загрузить в свою тему любой шрифт и зарегистрировать шорткод, который будет выводить иконки.
Покажу на примере Font Awesome.
Все операции производятся в файле functions.php активной темы или в специальном функциональном плагине.
Подключение шрифта
Загружаем с MaxCDN актуальную на данный момент версию Font Awesome 4.7.0
Регистрация шорткода
В заключение хотелось бы еще раз отметить, что иконочные шрифты очень просты и удобны в использовании. Но в серьезных проектах все таки целесообразнее использовать SVG.
25 Beautiful Icon Fonts for Web Designers
Ниже представлены на мой взгляд самые интересные и функциональные иконочные шрифты. Их можно использовать как на сайте, так и в любых программах на вашем ПК (например я активно использую иконочный шрифт в презентациях PowerPoint). О установке иконочного шрифта на сайт или компьютер будет посвящен отдельный пост.
Так же если вы знаете о существовании какого то иконочного шрифта, но не нашли его в этом перечне — пишите в комментариях (с ссылкой). Единственным условиям является легальность использования. Буду безмерно благодарна!
П. С. В этом списке вы не найдете всем полюбившийся и получивший огромное распространение шрифт Awesome. Это сделано намеренно =). Он заслуживает отдельного поста.
30 бесплатных иконочных шрифтов
1. Dashicons – The Official WordPress myasoedov Icon Font (197 иконок)
2. Linea Iconset (730+ иконок)
3. Themify Icons (320 иконок)
4. GitHub’s Octicons (178 иконок)
5. i OS7 Vector Icons (100 иконок)
6. Genericons (120 иконок)
7. Stroke 7 Icon Font (170 иконок)
8. Stroke Icons (80 иконок)
9. Icon-Works (134 иконок)
10. Devicons – An Iconic Font For Developers (123 иконок)
11. 77 Essential Icons (77 иконок)
12. Tonicons Outline Icons (200 иконок)
13. Stroke 7 – An iOS7 Inspired Thin Stroke Icon Font (170 иконок)
14. The Elegant Icon Font (360 иконок)
15. Iconia – An Icon Font With Three Styles: Regular, Circle and Cut (113 иконок)
16. Metrize Icons – A Metro-Style Icon Font (300 иконок)
17. Icon Pack – A Line-Styled Icon Font from Petras Nargela (40 иконок)
18. Ionicons – The Huge Icon Font for the Ionic Framework (528 иконок)
19. Batch Icons (300+ иконок)
20. IcoMoon Free Pack (450 иконок)
21. M FG Labs Web Icon Set (120 иконок)
22. Foundation Icons (140 иконок)
23. Ligature Symbols (250+ иконок)
24. OpenWeb Free Icon Font (54 иконок)
25. Sosa Free Icon Font (120 иконок)
26. One Div (91 иконок)
27. P W Drawn Icon Font (80+ иконок)
28. Premium Pixels Mini Icons (80 иконок)
29. Fontelico Font (30 иконок)
30. Genericons – An Icon Font from WordPress (123 иконки)
18 Best Free Icon Fonts for Graphic Design Projects
Еще в 2012 году на сайте Speckyboy, Design Magazine был опубликован первый Icon Font, бесплатный и премиум наборы. Здесь собраны 50 лучших бесплатных шрифтов с иконками (Icon Fonts), которые появились с тех пор. Смотрите.
Хотя, Icon Fonts очень популярны, но везде есть свои подводные камни. Ian Feather (Ян Фетер) обсудил свои причины перехода от Icon Fonts к SVG и хитрости CSS при выборе между Icon Fonts и SVG. Обе публикации явно в пользу SVGએ. Но, в качестве контраргумента, Pictonic показал, что Icon Fonts грузятся на 10% быстрее SVG. Поэтому, прежде чем использовать шрифты, вам необходимо познакомится с этими соображениями.