Иконочные шрифты для сайта – Генерация и подключение шрифта иконок к странице сайта. Как использовать иконки шрифта на странице сайта.

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

Также рекомендую:

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

1. StackIcons

StackIcons содержит более 60 иконок различных современных брендов. Вы можете использовать иконки как с прозрачным фоном, так и в круге, квадрате или квадрате с закругленными углами. Также иконкам можно изменять цвета.

2. Twemoji Awesome

Это иконки от социальной сети Twitter. Подключается также всё достаточно просто. Если возникают сложности с их установкой — скачайте пример и посмотрите как это реализовано там. Иконки можно применять из этой шпаргалки. Только вместо нижнего подчеркивания необходимо ставить дефис.

3. Octicons

Иконки от проекта GitHub. Здесь представлено более 170 иконок, которые Вы можете смело использовать на своих сайтах. Подробный процесс установки описан здесь.

4. Material Design Iconic Font

Данный сервис предоставляет значительно больше иконок, которые сгруппированы в 15 разных категорий. Чтобы установить их себе на сайт, Вам достаточно лишь подключить файл Material-Design-Iconic-Font.ttf, а затем использовать специальные коды символов из этой таблицы. Все действия над данными иконками аналогичны действиям со шрифтами в CSS.

С Уважением, Юрий Немец

Серьёзно, не используйте иконочные шрифты

Иконки везде. Эти “маленькие чудотворцы” (как их назвал Джон Хайкс) помогают нам увеличить интуитивность интерфейсов, которые мы проектируем и разрабатываем. Их популярность в веб-дизайне никогда не была выше, в частности, лаконичность и универсальность пиктограмм сделали их прекрасно подходящими для больших и маленьких дисплеев.

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

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

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

Но теперь нам необходимо остановиться. Пора отправить иконочные шрифты на Небеса Хаков, где они смогут порезвиться с основанной на таблицах версткой, “пуленепробиваемыми закруглёнными углами” и Scalable Inman Flash Replacement.

Большинство вспомогательных инструментов будут вслух зачитывать текст, вставленный с помощью CSS, и многие символы иконочных шрифтов — не исключение. В лучшем случае, ваш значок “избранное” будет произнесён как “чёрная любимая звезда”. В худшем, будет прочитано как “непроизносимо”, либо вовсе пропущено.

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

Большую часть времени мы полагаемся на автоматизированные системы, чтобы выбрать, какому юникод символу какой значек будет присвоен. Но в юникоде также живут Emoji. Если вы не будете осторожны, они могут перекрываться, хотя и иногда весёлыми способами. Мой любимый пример — баг “четыре звезды и лошадь”.

Совсем недавно на другом сайте были замечены иконки кулаков.

Когда не удаётся загрузить иконочный шрифт, браузер обрабатывает его как любой другой шрифт и заменяет на запасной. В лучшем случае, если вы тщательно выбирали символ, он заменится на нечто странное, но всё же передающее смысл. В худшем случае (и гораздо чаще), пользователь увидит что-то совершенно неуместное, обычно страшный “отсутствует символ”.

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

Хуже того, многие пользователи так никогда и не увидят эти шрифты. Opera Mini, с сотнями миллионов пользователей по всему миру, которая конкурирует с iOS Safari в глобальной статистике, вовсе не поддерживает @font-face.

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

Ситуация с многоцветными иконками ещё хуже. Техника наложения нескольких компонентов звучит интересно, но на практике выглядит, словно цвета смещены при печати.

“Но автор,” – я уже слышу от вас – “вы совершенно проигнорировали пуленепробиваемые иконочные шрифты от Filament Group`s, поддерживающие резервные варианты для отображения иконок”.

И вы правы. Эти технологии великолепны! Если вы используете иконочные шрифты, вы должны придерживаться рекомендаций статьи.

Но вы, вероятно, не будете это делать.

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

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

Эти примеры не гипотетические (хотя имена изменены, чтобы защитить невиновных). Я видел в нескольких организациях, как подобное происходит, начинаясь с наилучших намерений.

SVG прекрасно подходит для иконок! Это формат векторных изображений с дополнительной возможностью поддержки CSS, JavaScript, многократного использования, доступности и многого другого. Он был создан для подобных вещей.

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

“SVG не могут быть объединены в спрайты”

Очень даже могут. Более того, существуют специальные инструменты, такие как svg-sprite или IcoMoon, которые могут автоматизировать этот процесс.

“SVG файлы много весят”

Обычно, когда я это слышу, команды сравнивают один бинарный иконочный шрифт с несколькими отдельными не сжатыми SVG файлами.Разрыв резко уменьшается, если вы оптимизируете ваши SVG файлы, объединяете в спрайты и активируете Gzip сжатие, либо внедряете в страницу.

Изредка я слышу, что разрыв всё равно становится большим, если подключены сотни иконок. Напрашивается вопрос: Зачем вы внедряете сотни иконок на каждой странице?

“Разметка иконок требует много кода“

Давайте сравним:

<!-- Typical @font-face icon: -->
<span aria-hidden="true"></span>
 
<!-- Typical SVG icon: -->
<svg>
  <use xlink:href="path/to/icons.svg#search"/>
</svg>

Разметка SVG иконки немногим сложнее, однако взамен это понятнее и семантически правильнее, в отличии от какого-то пустого элемента с параметром aria-hidden.

“Браузерная поддержка SVG хуже, чем у шрифтов”

На момент написания статьи, поддержка SVG в мире превышает 96%… На 4% выше, чем аналогичная статистика распространения @font-face. К тому же, SVG более доступен и прямолинеен при ошибках.

“В фреймворке, который мы выбрали, уже используется иконочный шрифт”

А если фреймворк спрыгнет с крыши, вы тоже следом?

Я был в школе, когда веб-стандарты только получали распространение. В то время, когда большинство моих преподавателей ратовали за семантическую вёрстку, один из них не отказывался от табличной верстки. “Табличный парень” утверждал, что ни один инструмент не сравнится с версткой макетов с использованием <table>, что таблицы по своей сути лучше всего подходят для основанных на сетке дизайнов. Он хвастался, как он может легко и просто достичь “Святого Грааля” с использованием его любимых таблиц. В качестве одного из аргументов в свою пользу он приводил разнообразие кроссбраузерных несоответствий, что является проблемой и современного CSS.

Я поддерживаю связь с этим табличным парнем. Сегодня он свободно признаёт, что ошибался в CSS. Он чувствует себя неловко из-за того, что видел будущее в устаревших технологиях.

Если вы не хотите перестать использовать иконочные шрифты ради людей с читалками экрана, людей с дислексией, людей с отсутствием поддержки @font-face в браузере, людей, у которых по какой-то причине не загрузился один из иконочных шрифтов, или дизайнеров, которые просто хотят видеть иконки на экране…

Тогда сделайте это для себя. Не будьте табличным парнем.

Оригинал статьи в блоге автора: http://blog.cloudfour.com/seriously-dont-use-icon-…

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

Шрифты с иконкам вместо стандартного алфавита содержат разные символы, например, стрелочки, лупу, карандаши и многие другие иконки. Применяются, по сути, как альтернатива бесплатным пиктограммам.  Как и для всех подобных нестандартных решений подключение осуществляется через 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

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

Nerd Fonts

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

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

Как создать набор иконок в формате шрифта

Статья, в которой рассмотрим процесс создания иконочного шрифта с помощью сервиса IcoMoon (https://icomoon.io/).

Разработка персонального иконочного шрифта для сайта является одной из основных задач веб-разработчика. Т.к. использование готовых наборов шрифтов, может сильно «утяжелить» загрузку страниц сайта. Это связано с тем, что они содержат большое количество иконок (Font Awesome — 675 иконок, IconMoon — 491, Foundation Icons — 283, Glyphicons Halflings – более 250). В то время как количество иконок, которых реально требуется для оформления среднего сайта, находится в диапазоне от 20 до 50 единиц.

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

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

Использование иконок в таком формате является очень привлекательным решением. Во-первых, такими иконками очень просто управлять, т.е. изменять их размер, цвет и другие параметры. Осуществляется это с помощью таких же свойств CSS, которые применяются для стилизации обычного текста (font-size, color и др.). Во-вторых, в формате шрифта иконки находятся в векторном формате. Это означает то, что они хорошо масштабируются и отлично выглядят на экранах устройств с высокой плотностью пикселей. Кроме этого шрифт — это сжатый формат, а значит, для его загрузки может потребоваться гораздо меньше времени, чем для загрузки аналогичных векторных изображений. Ещё одним неоспоримым плюсом шрифтовых иконок является то, что они поддерживаются всеми браузерами. Осуществляется это благодаря созданию на базе одного пакета иконок шрифтов в различных форматах: eot, ttf, svg и woff. Это необходимо выполнить для того, что браузер использовал тот формат шрифта, который он «понимает». Потому что на текущий момент нет ни одного формата шрифта, который бы поддерживался всеми браузерами.

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

Основный алгоритм действий по созданию шрифта в IcoMoon App

Рассмотрим некоторые основные шаги по разработке шрифта в сервисе IcoMoon App:

1. Перейти на страницу IcoMoon App, с помощью кнопки, расположенной на главной странице сервиса или используя URL адрес: https://icomoon.io/app/.
2. Ввести название проекта (значок «Manage Projects»).
3. Добавить в проект при необходимости шрифт Font Awesome (кнопка с тремя полосочками -> Icon Library).
4. Добавить в проект пустой набор, который можно использовать для помещения в него пользовательских (своих) иконок (кнопка с 3 линиями -> New Empty Set).
5. Задать название только что созданному набору (кнопка с тремя полосочками -> View / Edit Info).
6. Добавить в набор пользовательские (свои) значки (кнопка «3 горизонтальные линии» -> Import to Set).
7. Выбрать иконки, которые необходимо добавить в результирующий набор, с помощью инструмента «Select».
8. Выполнить генерацию шрифта (нажать внизу страницы на элемент «Generate Font»).
9. Нажать на значок шестерёнки и в открывшемся диалоговом окне ввести название шрифта (Font Name), префикс класса (Class Prefix), выбрать опцию «Use a class» (Использовать класс) и указать в поле значение «.icon».
10. Нажать на кнопку «Download».

Подключение иконок в формате шрифта к странице

Для установки иконочного шрифта необходимо распаковать архив, созданный сайтом IcoMoon, и перенести из него в рабочий проект каталог fonts (шрифты) и файл «style.css».

По умолчанию папка со шрифтами должна располагаться в том же каталоге что и файл CSS. Для того чтобы каталог fonts расположить по-другому, необходимо внести соответствующие изменения в файл «style.css».

Подключения шрифта к странице и классов для удобной работы с ним осуществляется посредством файла «style.css».

<!-- path-to - путь до файла style.css -->
<link href="path-to/style.css" rel="stylesheet">

При желании содержимое файла «style.css» можно включить в свой файл стилей. Это позволит сократить количество HTTP-запросов и немного увеличить загрузку страницы.

Использование иконок на странице

Применение иконок созданного шрифта на странице осуществляется с помощью элемента i, к которому необходимо добавить базовый класс icon (определяется на основе настройки «Use a class») и класс иконки.

<!-- icon - базовый класс -->
<!-- icon-ok - класс иконки ok -->
<i></i>

Создание иконок социальных сетей для сайта

Разработку собственных социальных значков для сайта очень просто выполнить в открытом векторном SVG редакторе Inkscape.

Для этого их можно нарисовать или воспользоваться уже существующими изображениями иконок из бесплатных наборов.

Если вы в качестве исходников будете использовать растровые изображения значков, то их предварительно следует векторизовать.

После подготовки векторных svg-изображений их можно с помощью сервиса IcoMoon собрать в иконочный шрифт.

Пример иконок социальных сетей в форме прямоугольника со скруглёнными краями.

Скачать шрифт с социальными иконками и исходные коды можно по следующей ссылке: https://yadi.sk/d/oaOfUROSyTjDQ.

Использование социальных иконок на странице (классы социальных значков можно посмотреть в файле «style.css»):

<i></i>

Кроме IcoMoon есть ещё и другие онлайн сервисы для создания значков в виде шрифта. К ним относится «fontello.com», «fontastic.me», «glyphter.com», «pictonic.co» и др.