Micon — иконочный шрифт Windows 10 для веб-дизайнеров

Редизайн Windows 10 появился со многими новыми функциями и совершенно новым внешним видом. Одним из самых больших изменений стал стиль иконок, особенно по сравнению с Windows 7 и XP.
Благодаря набору Micon теперь вы можете добавлять иконки в стиле Win10 прямо на свой сайт.
Этот набор иконок поставляется в виде иконочного шрифта, и предоставляется он бесплатно через GitHub. Основной репозиторий имеет информацию о настройке, но на главной странице Micon представлены все значки с соответствующими именами классов.

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

Например, возьмите иконку зарядки аккумулятора, которая использует дизайн батареи и небольшой зарядный разъем. Вы получите предварительный просмотр иконки разных размеров вместе со своим CSS классом, в нашем случае это класс mi-BatteryCharging10.

Посмотрите страницу настройки, чтобы узнать больше. Действительно, вам просто нужно загрузить пакет Micon из GitHub и подключить таблицу стилей (вместе с соответствующими значками шрифтов) на свою страницу. Оттуда просто указывайте имена классов, как указано выше.

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

В целом, я действительно впечатлен разнообразием иконок и простой настройкой. Вы можете найти множество примеров на веб-сайте и даже анимированные иконки на странице «Examples», которая включает в себя фрагменты кода.

Эти иконки даже хорошо работают с Bootstrap, поэтому вы можете комбинировать его с базой Bootstrap 3 / Bootstrap 4 для некоторых реальных пользовательских макетов.

Скачайте бесплатно с домашней страницы Micon и посмотрите, как вы можете использовать эти значки в стиле Windows 10 в своем следующем проекте.

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

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

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

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

В чем плюсы

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

В чем минусы

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

Если это критично, значит лучше сразу перейти на формат 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 иконок разной направленности, регистрация в сервисе открывает доступ к тысячам других иконок.

Бесплатный набор из 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

Регистрация шорткода

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

Пример использования шорткода

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

В заключение

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

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

Иконочные шрифты для верстальщиков

При разработке современных сайтов сложно представить жизнь без использования шрифтов, состоящих из иконок. Применение шрифтов с иконками дает огромные преимущества при разработке сайта — это работа с иконками как с обычным текстом (можно применять CSS-стили), они прекрасно масштабируются (являются векторными изображениями), уменьшение количества HTTP-запросов при отображении (на загрузку растровых изображений понадобилось бы больше запросов), меньший размер по сравнению с обычными изображениями, поддержка различными браузерами.

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

Давайте рассмотрим бесплатные и полезные пакеты иконочных шрифтов.

Font Awesome — данный бесплатный пакет иконок не нуждается в рекламе и известен всем frontend-разработчикам, да и не только им. В коллекции шрифта 675 иконок (на данный момент доступна версия 4.7.0). Пожалуй, один из самых популярных бесплатных шрифтов, который используется на многих сайтах и фреймворках. На сайте доступны примеры по работе с Font Awesome. Если еще не пользовались им, то рекомендую взять в работу.

IcoMoon — в этом бесплатном пакете вам будут доступны 490 векторных иконок. Если вам не терпеться посмотреть на доступные иконки.

Linearicons — менее богатый пакет на количество иконок (всего 170 иконок для бесплатной версии). В принципе есть все базовые иконки для веб-разработчика.

Ionicons — данный чудеснейший пакет включает в себя 730 премиальных иконок и доступен совершенно бесплатно. Среди такого количества я думаю можно найти все что нужно для своего веб-проекта. В шрифт включены иконки для ценителей плоского и минималистического дизайна. Однозначно, рекомендую!

Ligature Symbols — бесплатный шрифт без лишних иконок. Содержит все необходимые иконки для web. Для тех, кому важна скорость загрузки и не надо ничего лишнего. Кстати, не так уж и мало иконок — около 240 штук.

Stroke 7 Icon Font Set — вас ждут 202 плоские иконки. Приятно для взгляда и очень современно. Рекомендую ознакомиться.

Material Icons — это восхитительные, красиво обработанные символы для обычных действий и предметов. Загрузите на рабочий стол, чтобы использовать их в своих цифровых продуктах для Android, iOS и в Интернете.

Themify Icons — 320+ бесплатных иконок для веб-дизайна и приложений. Специально созданы для ценителей Apple iOS 7.

Foundation Icon Fonts 3 — в принципе обычные иконки, но возможно кому-то именно этот пакет подойдет для работы. Иконок в нем около 283 штук.

Sosa — пакет реалистичных иконок от команды разработчиков tenbytwenty. Иконок мало, так что для крупного проекта не подойдет.

Linea — на сайте для удобства доступно несколько бесплатных пакетов с векторными иконками: базовый пакет, погода, музыка, коммерция, программное обеспечение, разработка, указатели. Плоский дизайн и аккуратность присутствует. В сумме свыше 730+ иконок.

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

Спасибо и следите за обновлениями на моем сайте.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Бесплатные шрифты с иконками

Шрифты с иконкам вместо стандартного алфавита содержат разные символы, например, стрелочки, лупу, карандаши и многие другие иконки. Применяются, по сути, как альтернатива бесплатным пиктограммам. Как и для всех подобных нестандартных решений подключение осуществляется через CSS @font-face.

Преимущества подобных шрифтов с иконками очевидны:

• Кроссбраузерная поддержка (даже в IE6 работает с помощью @font-face).
• Могут масштабироваться на лету.
• Легко задавать любой цвет для иконок.
• К шрифтам можно применять разные CSS свойства, например тень.

Эти шрифты мне чем-то напоминают сервисы иконок созданных на CSS One Div и The Noun Project. И те, и другие достаточно гибкие в плане использования (кроссбраузерность, масштабирование, разные эффекты). Но применение шрифтов все же более простое, для них не требуется много строчек кода. Вот тут можете посмотреть демо использования шрифтов с иконками (попробуйте поменять там разные параметры).

Но вернемся все же непосредственно к самим наборам шрифтов.

Бесплатные шрифты с иконками

Raphaël Icon-Set

В наборе Raphaël Icon-Set 116 иконок, лицензия MIT License. Тут реально много разных иконок — от погоды, смайликов, браузеров до социальных сетей и системных картинок.

Sosa icon font

В Sosa icon font найдете 121 иконку, допускается использование в коммерческих проектах. Вместе с весьма необычными картинками полно стандартных изображений (стрелочки и прочие системные иконки).

Foundation Icon Fonts 3

В наборе Foundation Icon Fonts 3 283 иконки, которые разделены на группы: основные, страницы, стрелочки, люди, устройства, текстовый редактор, медиа, электронная коммерция, социальные и другие.

Font Awesome

В шрифте Font Awesome имеется 369 иконок. Набор постоянно добавляется и расширяется.

Iconic Icon Set

Обязательно зайдите на страницу тура на сйате Iconic Icon Set, где сможете почитать о всех преимуществах этого шрифта. Плюсы такие, как и везде — масштабирование, эффекты, оформление цветом и т.п.

IcoMoon

Для создания шрифта IcoMoon нужно воспользоваться специальный приложением сервиса IcoMoon web app. Если я правильно понял, то здесь можно просмотреть несколько разных наборов шрифтов, а также добавлять свои собственные иконки.

Entypo

В Entypo более 100 разных иконок, лицензия — Creative Commons Attribution 3.0 Unported.

Typicons

Набор Typicons содержит 336 иконок на любой вкус и цвет.

Если у вас имеется проект/приложение с погодными прогнозами и подобной тематикой, то данный вариант от Weather Icons будет интересен. Всего он содержит 222 объекта, которые можно добавлять в Bootstrap сборку, изменять с помощью CSS и т.д. Элементы разбиты на группы: ночные, дневные, нейтральные, фазы луны и разное. Также советуем глянуть иконки погоды в PNG и векторе.

Nerd Fonts

Напоследок предлагаем оценить агрегатор шрифтов Nerd Fonts, который включает себя несколько наборов для разработчиков. Кроме упомянутого выше Font Awesome, найдете здесь такие проекты как Octicons, Seti UI, Devicons и др. Общее число иконок на данный момент — 1330. На сайте проекта найдете описание, возможность поиска по всему архиву и другую инфу.

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