Получать рассылку по электронной почте

Введите свой email-адрес:

Delivered by FeedBurner

Навигация

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

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

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

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

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

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

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

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

Font Awesome

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

IcoMoon

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

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

Открываем страницу 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 дают нам возможность указать

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

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

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

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

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

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

 

Понравилась статья?
Подпишитесь на RSS по e-mail
Поделитесь в социальных сетях
Вы можете также посмотреть
Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*