Для чего в макете используются шрифтовые иконки

Эволюция иконок

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

Что такое SVG

SVG (Scalable Vector Graphics) позволяет отображать в браузере векторную графику. Формат SVG быстро стал новым стандартом для иконок и анимации. Они быстрее загружаются, прекрасно масштабируются и более надежные в использовании, чем иконочные шрифты. Векторная графика полностью стоит из кода и весит гораздо меньше, чем изображения в форматах JPG или PNG и большинство библиотек иконочных шрифтов.

Сравнение

Настало время сравнить SVG и иконочные шрифты по нескольким параметрам.

1. Размер

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

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

2. Производительность

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

Встроенные SVG иконки не требуют дополнительного запроса, но и кэшироваться браузером они тоже не могут.

Опять же, производительность во многом зависит от того, сколько весят ваши иконочные шрифты/SVG.

3. Гибкость

Оба формата можно настраивать с использованием CSS, но SVG дает гораздо больше возможностей, например, сделать иконки разноцветными.

Иконочным шрифтам можно прописывать CSS-стили (тень, цвет и т.д.), их можно массово изменять при помощи одного правила в CSS, их можно анимировать.

4. Поддержка браузеров

5. Масштабируемость

Вывод

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

А что вы используете в разработке, SVG или иконочные шрифты?

Источник

Иконочные шрифты для сайта — что это и как использовать?

Доброго времени суток всем, кто решил посетить мой интернет-дневник zaurmag.ru. Вот и наступил 2016 год. Если вы заметили я в свой блог пишу очень редко и говорить о каких-то достижениях в ушедшем году я не буду. Не то, чтобы я совсем ничего не добился, просто результаты оказались не теми, что я ожидал. В любом случае это тема для отдельной заметки. А в этой статье я хочу затронуть такую тему, как иконочный шрифт. Давно хотел написать про иконочный шрифт, т.к. он стал в последнее время очень популярным, но все руки никак не доходили. Хотелось бы раскрыть эту тему более подробно.

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

Давайте для начала определимся с плюсами и минусами иконочного шрифта. Вы наверно сейчас скажете: «А что есть и минусы?». Да, конечно, у иконочных шрифтов есть свои минусы, правда они мне как верстальщику не мешают.

Плюсы:

Минусы:

Где взять иконочный шрифт?

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

Вот некоторые ссылки на сервисы иконочных шрифтов:

Font Awesome

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

Подключение Font Awesome

Для начала нам необходимо скачать набор иконок с официального сайта (ссылка выше). Жмем по большой кнопке «Download» на главной странице сайта. Распаковываем архив с иконками у себя на компьютере.

Копируем папки «css» и «fonts» в шаблон вашего сайта. Далее, необходимо подключить файл стилей в главном файле шаблона (index.php). В архиве лежат две версии файла – сжатая (минимизированная) и разжатая. Подключаем сжатую версию — font-awesome.min.css.

Не отходя от темы сразу скажу, что данный файл можно подгрузить с CDN – BootstrapCDN или MaxCDN.

Это нужно для того, чтобы уменьшить количество http-запросов на сервер, снижая тем самым нагрузку.

Если у вас файл стилей иконочного шрифта лежит не в папке «CSS», а скажем в корне шаблона, то вам необходимо будет прописать правильные пути до файлов шрифтов иконок в файле «font-awesome.min.css». Если сложно ориентироваться в минимизированной версии, то можете подключить несжатую версию стилей.

Использование Font Awesome

Давайте рассмотрим, как можно применить иконки от Font Awesome на сайте. Вообще на официальном сайте есть руководство для начала работы, примеры реализации иконок, ну и сама база иконок, можно посмотреть какие иконки входят в набор. Если с английским туго, то можете воспользоваться русскоязычной версией сайта —http://Font Awesome.ru/get-started/.

Итак, для того, чтобы показать икону на сайте необходимо создать тег или и задать необходимые классы. Какие именно? Все зависит от того, какую иконку вы хотите вывести. Идем на официальный сайт в раздел с иконками «Icons» и выбираем необходимую иконку. Для удобства поиска все иконки подразделены на группы.

Также можно воспользоваться поиском по ключевым словам. Слова следует вводить на английском, т. е. не транслитом, а именно значение слова на английском языке. Если туго с английским, то воспользуетесь гугл переводчиком.

Далее, щелкаем по иконке и попадаем на страницу иконки. Здесь нам в готовом виде уже предложен html-код данной иконки. Например…

Копируем и вставляем данный код в нужном месте на нашем сайте. Хотел бы отметить, что если вы захотите вставить иконку в статью через визуальный редактор, то некоторые визуальные редакторы могут вырезать данный тег при сохранении материала. В данном случае в настройках редактора нужно внести тег « » в список разрешенных тегов. Если не знаете как именно, то Гугл вам в помощь.

Итак, иконка у нас отобразилась. Что мы можем сделать с данной иконкой? Мы можем задать ей цвет через правило «color» в css, мы можем увеличить размер иконки, мы можем задать тень через правило «text-shadow», т. е. мы можем проделать через css все те манипуляции, что и для текста.

Примеры реализации Font Awesome

Если перейти на страницу «Exsamples» (примеры реализации) на официальном сайте, то мы можем увидеть дополнительные возможности, которые уже заложены разработчиками иконочного шрифта. Что это за возможности? Например, мы можем изменить размер иконки на один из предустановленных размеров. Для это просто необходимо дописать соответствующий класс.

Как видим у нас появился дополнительный класс у иконки, который отвечает за ее размер — fa-5x, или fa-4x и т.д.

Также мы можем задать анимацию иконке, добавив соответствующий класс. Например…

Здесь за анимацию отвечают классы — fa-spin и fa-pulse. Чем они отличаются можно посмотреть в примерах на официальном сайте.

Что еще можно сделать с иконками? Мы можем повернуть иконку. Для необходимого поворота также нужно добавить соответствующий класс.

Думаю здесь подробных комментариев не нужно. Например, класс «fa-rotate-90» отвечает на поворот иконки на 90 градусов по часовой стрелке.

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

Использование Font Awesome на компьютере

Теперь давайте разберем как можно использовать шрифт Font Awesome на компьютере, например, в программе Photoshop. Здесь все очень просто — устанавливаете otf-шрифт — Font Awesome.otf. Данный шрифт сможете найти в папке fonts после скачивания архива Font Awesome. Далее воспользуемся страницей-шпаргалкой, которую для нас создали разработчики. Найти вы ее сможете по адресу — http://fortawesome.github.io/Font-Awesome/cheatsheet/ — на официальном сайте, и также русско-язычная версия — http://Font Awesome.ru/cheatsheet/. Как советуют разработчики, сохраните данную страницу в формате PDF, чтобы она всегда была под рукой. Отсюда понадобится копировать иконки юникода. Чтобы отобразить иконку в программе Photoshop необходимо скопировать нужную иконку (именно выделить саму иконку, а не ее название) и вставить в нужном месте в макете. Появится символ прямоугольника с крестиком внутри. Выделяем его и применяем установленный ранее шрифт «Font Awesome Regular».

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

Это то, что касалось Font Awesome. Теперь давайте перейдем к такому сервису, как Fontello. Именно Fontello я использую для генерации шрифтов иконок. Есть у него свои нюансы, чего нет (по крайней мере я не нашел) в Font Awesome.

Fontello

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

Чем хорош данный сервис?

Fontello позволяет наиболее гибко работать с иконочным шрифтом. В чем выражается эта гибкость? В Fontello мы можем добавить в набор только те иконки, которые нам нужны. За счет этого файлы шрифтов иконок получатся легкими и не будут создавать дополнительную нагрузку. Также иконки от Fontello можно установить и внедрить в фотошоп, чтобы дизайнер работал именно с определенным набором иконок. Далее данный набор передается верстальщику и он внедряется в дизайн. Таким образом, работа облегчается во много раз.

Добавление иконок Fontello в набор

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

Весь набор выбранных вами иконок можно посмотреть во вкладке «Customize Names».

Удалить иконку из набора можно, щелкнув по крестику или кликнуть повторно по выделенной иконке во вкладке «Select Icons».

Также имеется еще одна вкладка под названием «Customize Codes». Здесь мы можем получить код иконки. Для чего нужен код иконки я расскажу ниже.

Вкладка «Help/Wiki» ведет на страницу проекта в Github, а именно на страницу документации. Правда здесь на английском. Кто знает английский может пройтись и по ней тоже, если станет что-то не понятно.

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

Стоит отметить, что в набор иконок мы можем загрузить и свою иконку. Для этого мы должны подготовить векторное изображение в формате SVG и загрузить в Fontello простым перетаскиванием в поле «Custom Icons». У меня, если честно, так и не получилось добиться хорошего качества кастомной иконки. Здесь скорее всего все зависит от качества самой иконки в SVG.

В поле «font name» мы можем ввести свое название имя шрифта иконок, например, «my-fonts-icons». Название следует вводить латинскими буквами (a-z) и маленькими буквами, а также можно использовать символы подчеркивания — «-» или «_». По умолчанию название — fontello. В архиве названия шрифтов и файлов стилей будут заменены вашим названием.

Когда набор готов мы можем скачать архив файлов иконок. Для этого кликнем по розовой кнопке «Download webfont» в правом верхнем углу. Обратите внимание, что нам сразу показывается количество иконок в наборе.

Сохраняем архив на компьютере и распаковываем. Давайте разберем, что лежит в архиве.

Папка «css» — в ней содержатся файлы стилей. Какой из них использовать читайте ниже.

Папка «font» — в данной папке хранятся шрифты иконок.

Файл «config.json» — файл настроек иконок. Вы можете импортировать обратно ваши иконки в Fontello и работать с ними дальше.

Файл «demo.html» — можно открыть демо-страничку собранных иконок посмотреть их в браузере.

Файл «LICENSE.txt» — файл лицензии, т.е. по какой лицензии распространяются иконки.

Файл «README.txt» — краткая документация на английском языке по использованию иконок Fontello

Подключение иконок Fontello

Иконки от Fontello подключаются практически также как и Font Awesome. Из набора иконок сначала мы подключаем файлы/файл стилей, их несколько. Почему так много? Давайте разберем каждый файл (названия файлов стилей шрифтов указаны по умолчанию).

fontello.css — основной файл стилей fontello

animation.css — данные стили отвечают за анимацию иконок, т.е. нужно, если вы используете анимированные иконки в наборе.

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

fontello-embedded.css — стили со встроенным шрифтом WOFF. Его необходимо использовать, если хотите избежать проблем с CORS в Firefox и IE9, а также если ваши иконки хранятся на отдельном домене. Честно сказать, этим не пользовался. Конкретно сказать не могу.

fontello-ie7.css — основной файл стилей иконок для поддержки браузером ИЕ7

fontello-ie7-codes.css — коды иконок с поддержкой браузера ИЕ7

От себя хочу сказать, что стили для поддержки ИЕ7 я не использую, т.к. данный браузер уже устарел. Вообще для старых браузеров я ставлю заглушку.

Итак подключаем основной файл стилей (название файла стилей указано по умолчанию) в главном шаблоне сайта (обычно это index.php):

Далее рассмотрим как использовать иконки в шаблоне сайта.

Использование иконок Fontello в шаблоне сайта

Для того, чтобы отобразить иконку в шаблоне нам необходимо добавить соответствующий класс тегу i или span. Можно конечно и div, но лучше будет использовать теги span или i. Какой добавить класс? Идем на сайт fontello и переключаемся во вкладку «Customize Names». Здесь мы видим иконки и справа названия классов. Копируем класс и назначаем его тегу с иконкой.

Теперь давайте давайте разберем как назначить иконку элементу в который мы не можем добавить html-код иконки. Например, элемент выводится через javaScript, а сам код минимизирован. Можно конечно разжать код, найти это место, где создается необходимый элемент и вставить в него тег иконки, но это все долго и муторно. А если вы еще в javaScript не бум бум, извините за выражение… Это можно сделать посредством стилей, к стилям то мы всегда доступ имеем )). Вот этим мне и нравится Fontello. Итак, чтобы добавить иконку элементу необходимо создать псевдоэлемент этого элемента и вывести через правило «content» иконку. Давайте покажу на примере. У нас есть пункт меню:

Давайте в тег «a» добавим иконку. Для начала данному тегу назначим иконочный шрифт fontello (названия файлов шрифтов указаны здесь по умолчанию) через правило «font-family». Код css будет следующим:

Далее создаем псевдоэлемент тегу «a» и выведем иконку, передав через правило «content», соответствующий код иконки. Чтобы узнать код иконки достаточно открыть общий файл стилей иконочного шрифта — fontello.css и ниже, там, где идут коды иконок найти иконку с нужным классом. Я, к примеру, возьму иконку с классом «icon-camera-alt». Данная иконка присутствует в моем наборе. Ищем в кодах класс «.icon-camera-alt::before» и копируем правило «content» вместе с кодом.

В итоге код будет следующим:

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

Также код иконки можно получить и на сайте Fontello. Переключитесь во вкладку «Customize Codes». В данной вкладке указаны иконки вашего набора с кодами для вывода. Вы можете переопределить свой код при необходимости. Но это необходимо сделать перед загрузкой набора.

Если взять первую иконку, то в css вывод иконки будет следующим:

Использование иконок Fontello в Photoshop.

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

Перед загрузкой архива с иконками щелкаем по иконке настройки и выбираем в списке «Advanced font settings…». Далее в модальном окошке настроек переключаемся в пункте «Encoding» с «Private Use Area» на «Text characters», сохраняем. Качаем архив со шрифтами и распаковываем на компьютере.

Далее из папки «font» находим шрифт с расширением «.ttf» и устанавливаем его в ОС. Шрифт лучше установить так, как описано в данной статье. Не поленитесь почитать. Теперь в самом фотошоп ситуация обстоит также как и в случае с Font Awesome — копируем символ иконки и вставляем в макет, выбираем шрифт для символа (появившийся прямоугольник с крестиком) — fontello Regular (это в моем случае, т.к. шрифт у меня идет по умолчанию, у вас он может быть с вашим именем). Только, где скопировать саму иконку в юникод? Идем все в ту же вкладку «Customize Codes» и копируем символ иконки для фотошоп.

Вот, что у меня получилось:

Импорт иконок обратно в Fontello

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

Если помните в архиве у нас лежал файл «config.json». Так вот в данном файле хранятся все созданные нами иконки. Чтобы сделать импорт нам следует перейти на сайт fontello, кликнуть по значку настроек и выбрать «Import».

Далее находите файл config.json у себя на компьютере и выбираете его. После этой операции вы увидете свой набор иконок.

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

Из предложенных ссылок иконочных шрифтов присутствовал также сервис icomoon.io, но про него писать я не буду, т.к. статья итак получилась большой. Но если вы разберетесь в Font Awesome и Fontello, то уверен, что и Icomoon вам освоить будет несложно.

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

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

Источник

Иконочный шрифт: Что это и зачем нужно?

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

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

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

Начну из далека. Вспомним не далекое прошлое. Сейчас дисплеи высокого разрешения на планшетах мы воспринимаем как должное, но еще недавно это было скорее исключение чем правило. Первым планшетом в дисплеем Retina стал iPad 3. В чем же заключалась принципиальная разница в планшетом предыдущего поколения — только в разрешении экрана. Было разрешение дисплея 1024х768, стало 2048х1536. А на практике мы с вами увидели в 2-ва раза более четкую картинку.

Сейчас этим уже никого не удивишь, и дисплеи высокого разрешения стали стандартом, получили широкое распространение в смартфонах, планшетах и ноутбуках. Улучшение качества картинки в 2-ва раза не прошло не заметно для приложений и веб-ресурсов. Такой качественный скачок требовал от интерфейсов большей детализации, т.е. стандартного разрешения картинок уже стало не достаточно для красивого отображения на Retina дисплеях. Разработчики приложений (а они первые почувствовали последствия) были вынуждены в срочном порядке перерисовывать интерфейсы в более высоком разрешении. Но если зачастую обслуживанием приложений продающихся в App Store занимается непосредственно команда разработчиков которая располагает и знаниями и ресурсами что бы что то корректировать, то с сайтами дело обстояло гораздо хуже. Сайты дизайн которых использует png и jpg картинки так же стали “плохо выглядеть” в глазах пользователей Retina дисплеев, но никто не торопился что то менять.

Конечно на тот момент, а тем более сейчас многие сайты были выполненные инструментами CSS которые позволяют минимизировать количество графики в сайте, но вот иконки и пиктограммы ранее всегда вставлялись на сайт в виде картинок. Такие иконки на дисплеях высокого разрешения отображаются размыто. Более того, при изменении масштаба отображения страницы качество таких png/jpg иконок обязательно падает, а при использовании адаптивного дизайна растровые иконки вносят ряд существенных ограничений. Я уже не говорю о том что растровые картинки замедляют загрузку страницы сайта.

Для тех кому лень читать

Недостатки использования иконок png/jpg на сайте:

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

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