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

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

84 496 в Html5, Css3 26

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

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

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

Плюсы:

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

Минусы:

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

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

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

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

Font Awesome

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

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

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

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

<link rel="stylesheet" href="/шаблон сайта/css/font-awesome.min.css">

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

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

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

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

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

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

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

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

<i class="fa fa-mouse-pointer"></i>

Пример html-кода иконки FontAwesome

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

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

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

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

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

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

Читайте также:  Правильная верстка шаблона - советы новичкам и не только...

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

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

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

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

<i class="fa fa-shield"></i> normal
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

Думаю здесь подробных комментариев не нужно. Например, класс «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».

Копирование иконки fontawesome в юникод Преобразование символа в иконку fontawesome в Photoshop

Иконка fontawesome в Photoshop

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

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

Fontello

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

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

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

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

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

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

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

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

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

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

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

Ползунок изменения размера иконок Fontello

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

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

Поле ввода имени шрифта иконок Fontello

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

Скачать набор иконок Fontello

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

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

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

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

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

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

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

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

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

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

Читайте также:  CSS анимация на сайте посредством библиотеки Animate.css

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):

<link rel="stylesheet" href="/название шаблона/css/fontello.css" />

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

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

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

<i class="icon icon-emo-happy"></i>

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

<li><a href="#">Пункт меню</a></li>

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

ul > li > a {
font-family: "fontello";
font-style: normal;
font-weight: normal;
}

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

Код иконки Fontello в css

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

ul > li > a::before {
content: '\e803';
}

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

ul > li > a.camera::before {
content: '\e803';
}

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

Вкладка Customize Codes Fontello

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

content: "\e800"; // незабываем ставить обратный слеш.

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

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

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

Advanced font settings Fontello

Advanced font settings Fontello - Text chacarcter

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

Символ иконки в юникод в Fontello

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

Иконки Fontello в фотошоп

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

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

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

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

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

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

Ну вот и все.

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

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

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

Всем удачи, всем пока!!!

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (9 оценок, среднее: 4,44 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории