Иконочные шрифты — плюсы и минусы. Сервисы FontAwesome и IcoMoon
Поиск
шрифтовые иконки

Иконочные шрифты — плюсы и минусы. Сервисы FontAwesome и IcoMoon

Nikel, 15.12.2016

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

Гибкость:
Позволяет легко изменить цвет иконки или применить другие CSS-эффекты.
Масштабируемость:
Изменить размер иконок так же легко, как размер шрифта.
Вектор:
Такие иконки векторные и не зависят от разрешения. Они хорошо смотрятся как на  мобильных, так  и  на настольных устройствах, как известно адаптивность сейчас очень актуальна.
Скорость:
При использовании шрифтовых иконок для их загрузки достаточно одного запроса http.
Доступность:
Если все сделано правильно, иконки на 100% доступны и совместимы с программами чтения с экрана.

Минусы менее очевидны, но также присутствуют

  • Такие иконки плоские и монохромные, поскольку шрифт нельзя раскрасить в разные цвета
  • Иногда они довольно коряво выглядят при маленьких размерах шрифта

Кстати, на своем блоге я тоже использую подобные иконки (они расположены справа вверху, «в шапке» сайта).

Шрифтовые иконки

Рассмотрим как добавить их на свой сайт. Я предлагаю познакомиться с двумя  специальными онлайн-сервисами, которые позволят сделать это быстро и легко Font Awesome и Icomoon.

Font Awesome

Этот небезызвестный сервис можно найти по адресу http://fontawesome.io/

Все,что здесь представлено вы можете увидеть в разделе Icons. Иконки сгруппированы по типам:  веб-приложения, типы файлов, платежные, графики, стрелки, бренды, медицинские и т.п.

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

Установка шрифта

Для начала откроем раздел сайта GetStarted и скачаем (нажав кнопку Download) архив font-awesome.zip.

  •  Распакуем и скопируем весь каталог font-awesome в свой проект.
  • В теге <head> HTML укажем путь  к файлу стилей шрифта awesome.min.css.

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

CDN (сети доставки и контрибуции контента) позволяет ускорить загрузку интернет пользователями контента. Использование CDN — это простой способ добавить Font Awesome на свой сайт, поскольку в данном случае не требуется ничего скачивать, а просто нужно добавить одну строчку кода. Чтобы получить этот код, нужно отправить свой email, на который будет выслано письмо(форма отправки на странице Get Started).

В письме будет embed code, который вы должны включить в свой тег <head> и больше добавлять ничего не нужно, все должно начать работать.

 

Как добавлять иконки

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

атрибут class тега i должен содержать CSS-префикс fa, указывающий на то, что мы имеем дело с иконкой Font Awesome  и название самой иконки fa-bomb (например).

Дополнительные возможности

  • предусмотрены классы для увеличения размеров иконки — fa-lg (33% увеличения), fa-2x, fa-3x, fa-4x и fa-5x
  • Можно использовать классы fa-ul и fa-li для простой замены маркеров в неупорядоченном списке ul-li.
  • В анимированных иконках используется класс fa-spin чтобы заставить их вращаться и класс  fa-pulse чтобы заставить из поворачиваться за  8 шагов.
  • Поворот любой иконки на 90-180-270 градусов или ее отражение горизонтально/вертикально.
  • Иконки фиксированной ширины удобны когда нужно выравнять их одна под другой, например в навигационных списках
  • Задание иконке обтекания слева или справа (float:left, float:right) с помощью классов fa-pull-left и fa-pull-right
  • Добавление бордера вокруг иконки

Больше живых примеров можно увидеть в разделе Examples.

 Более простое добавление иконки

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

Из архива font-awesome.zip копируем на сайт папку fonts, а из стилей css/font-awesome.css, находящихся в этом же архиве, берем только код отвечающий за подключение шрифта FontAwesome и вставляем его в основной файл стилей на своем сайте.

Теперь,  если нужно вывести иконку на сайте (пусть это будет иконка бомбы из примеров выше) заходим на страницу отдельной иконки и смотрим ее код (находим псевдоэлемент :before тега i с классом fa-bomb) . Копируем содержимое свойства content, соответствующее конкретной иконке (в нашем случае "\f1e2").

Пишем любой тег, скажем

у себя на сайте и задаем к нему  стиль

После этой нехитрой манипуляции, иконка должна отобразится. Размер ее можно регулировать в стилях задавая свойство font-size.

IcoMoon

Пришло время познакомиться с еще одним сервисом, под названием Icomoon. Вы можете посетить этот сервис по адресу https://icomoon.io/

Какие преимущества есть у IcoMoon?

  • Создание пользовательских шрифтов. Используя IcoMoon приложение, можно создавать свои собственные шрифты, которые содержат только иконки, которые вам нужны. 
  • Бесплатные иконки, бесплатное приложение  IcoMoon.  Библиотека IcoMoon содержит множество высококачественных наборов иконок.
  • Приложение IcoMoon позволяет сортировать иконки, управлять своими коллекциями иконок, или сделать их доступными для поиска путем добавления тегов. 
  • В приложении IcoMoon, вы можете импортировать свои собственные векторы (SVG-изображения или шрифты SVG).  Также доступны некоторые основные функции редактирования (перемещение, зеркальное отображение и вращение) .

Открываем страницу Icon Packs IcoMoon (нам также предложат на выбор другой набор, Linearicons).

Как видим, существует три набора, отличающиеся количеством иконок, первый, бесплатный, содержит их только 490 , а версия Ultimate включает целых 1600!

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

Заходим в приложение, нажав кнопку как на картинке

Вы увидите набор иконок, над которыми можно совершать различные действия. Рассмотрим поподробнее панель управления наверху. Там присутствуют 4 кнопки, с помощью которых вы можете выделить иконку, удалить ее, переместить или начать редактировать. Поиск и стрелки отмены действия также имеют место быть.

Редактирование иконки нам доступно следующее:

  • Выравнивание, определяющее положение иконки относительно центра
  • Масштабирование
  • Вращение вокруг своей оси
  • Перемещение

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

Та коллекция, что здесь представлена — это далеко не все доступные иконки, вы можете добавить еще один сет, используя кнопку Библиотека иконок или загрузить собственные с помощью Import Icons (только они должны быть в формате SVG).

В самой библиотеке вы найдете много наборов, которые можно добавить (кнопкой Add)или удалить(Remove) (если он уже есть в вашей коллекции, в этом случае он помечен галочкой).

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

Выпадающее меню сверху позволит вам выполнить следующие действия:

  • Управлять своими проектами
  • Создать новый пустой набор
  • Создать новый набор из выделенных иконок
  • Убрать выделение со всех иконок

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

Итак, давайте сначала выделим из наборов те иконки, которые нам нравятся (они будут подсвечены оранжевыми рамочками) и в главном выпадающем меню нажмем команду New Set From Selection, в результате появится наш собственный набор. Убедимся, что все иконки находятся в выделении и щелкнем внизу на кнопку Generate Font для создания нашего шрифта (при желании тут также можно создать SVG)

.

Мы попадем на страницу, где можно внести последние изменения — переименовать каждую иконку, получить код для иконок (html и css) и задать кой-какие свойства (Preferences).

Preferences дают нам возможность указать

  • имя шрифта,
  • префикс класса, который будет указываться  в теге иконки (по умолчанию icon),
  • требуемую поддержку браузеров,
  • включать или не включать метаданные в шрифт,
  • генерировать ли Sass, Less
  • какие использовать CSS селекторы (использовать класс icon, использовать селекторы атрибутов, использовать тег  i)

Открыв окно с кодом для любой иконки, мы можем понять как добавить иконку на сайт. В теге span нужно указать класс icon общий для всех иконок и класс конкретной иконки, который образован из префикса icon и ее названия, например  - icon-mail-error (это справедливо только для заданных Preferences, префикс класса — icon, использовать класс icon).

Когда все готово, нажимаем внизу кнопку Download и скачиваем архив. В архиве нам потребуется папка Fonts, которую необходимо перенести на ваш сайт (например, в папку с шаблоном, тут все зависит от CMS) и  файл style.css, его можно скопировать полностью в файл стилей на вашем сайте, чтобы не подключать еще один файл стилей.

Обязательно проверьте правильность путей к файлам шрифта в правиле @font-face стилей.

Как выводить иконку на сайте мы уже рассмотрели (с помощью тега вида

где -rainbow название иконки, которое можно посмотреть в файле demo.html в скачанном архиве).

На этом я, пожалуй, закончу свой обзор, до свидания!