Шрифт иконок: Font Awesome — иконочный шрифт и CSS-инструментарий

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

Статья, в которой рассмотрим процесс создания иконочного шрифта с помощью сервиса 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 — Выбор иконок (шаг 1)Работа в сервисе IcoMoon — Указание названий значкам (шаг 2)Работа в сервисе IcoMoon — Установки для генерации шрифта

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

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

Создание иконки «Twitter» в Inkscape

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

Сборка шрифта из созданных иконок в IcoMoon

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

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

<i></i>

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

Как собрать шрифт с иконками

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

UPD. Появилась более новая версия сборки

Зачем это делать, есть же фонтелло

Есть много сервисов, которые собирают шрифт из загруженных свг-файлов. Зачем придумывать что-то своё?

• Чтобы случайно не сломать шрифт. Если забыть иконку, которую уже выдавал и не загрузить в фонтеллу, то она не попадет в новый шрифт и где-то в интерфейсе пропадет иконка.
• Подойдет, если дизайнеров несколько. Если дизайнеров в команде несколько, то нужна синхронизация между ними. Было бы круто, если бы каждый мог добавлять в шрифт иконки и не сломать чужой результат.
• Легко встраивается в ваш CI-процесс.
• Не всех устраивает внешний сервис. Внешний сервис может быть недоступен, он может внезапно обновиться, стать платным, и вообще не все готовы отдавать наружу свои иконки.
• Разработчику сразу формируется и less-файл. Обмениваться кодами символов неудобно, они генерируются автоматически и могут измениться, использовать css-класс надежно, он не поменяется.

Вариант 1. Собираем и отдаём шрифт

Я выложил все необходимые файлы в репозиторий icon-font-public, скачайте его и распакуйте куда-нибудь.
Скачать: https://github.com/mikeozornin/icon-font-public/archive/master.zip

Шаг 1. Настраиваем среду

Все эти заклинания надо произнести один раз, дальше не понадобятся

1) Установить brew. Brew — это такой менеджер пакетов, который легко позволяет ставить программы и библиотеки. Выполнить в терминале команду:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2) С помощью brew установить шрифтообработчики:

brew install ttfautohint fontforge --with-python

3) Установить node.js, скачать тут https://nodejs.org/en/ current-версию.

4) Установить SketchTool
При установленном Sketch выполнить в терминале команду:

/Applications/Sketch. app/Contents/Resources/sketchtool/install.sh

5) Установить grunt

npm install -g grunt-cli

Шаг 2. Сборка файла шрифта

Для сборки шрифт нужно произнести в терминале заклинание:

./build.sh

Если в первый раз не сработает, сделайте скрипт выполняемым:

chmod +x build.sh

В итоге при добавлении иконки нужно будет сделать:

1. Нарисовать иконку.
2. Собрать шрифт: ./build.sh
3. Отдать файл шрифта и less-файл разработчику

Что все это было?

Всё, что описано выше работает так:

1. С помощью SketchTool всё, что может быть экспортировано, экспортируется из скетча в СВГ-файлы.
2. СВГ-файлы, полученные на шаге выше собираются в шрифт. Для этого запускается сборщик шрифта, который все СВГ-файлы собирает в шрифт, конвертирует его в нужный формат и формирует хтмл-страницу с превью.

Вариант 2. Собираем и отдаём шрифт npm-пакетом

Это ещё что такое?

Фронтенд-разработчики подключают библиотеки через npm-пакеты. Это привычная и удобная для них среда, кроме этого, npm-пакет сделает передачу шрифта удобней.

Шаг 1. Настраиваем среду

Нужно настроить среду как в первом варианте, и дополнительно настроить локальный npm-репозиторий. Спросите вашего фронтендера как это сделать у вас в команде. Попросите его исправить файл package.json.

Шаг 2. Сборка файла шрифта

1. Нарисовать иконку.
2. Собрать шрифт: ./build.sh
3. Изменить версию пакета в файле package.json
4. Выполнить команду grunt publish
5. Передать разработчику шифровку «Выпустил пакет версии xxx».

Вариант 3. Собираем и отдаём шрифт нугет-пакетом

К сожалению про нугет ничего не знаю, но если кто-то соберет рабочий вариант, добавлю.

На что обратить внимание при рисовании иконок

При экспорте иконок надо не забыть перевести все в кривые. Чего не должно быть:

• Радиусов скруглений
• Покрашенным рамок
• Текстовых надписей

Если это будет, то иконка может выглядеть в шрифте плохо, даже если в СВГ-файле было всё ок.

Если что-то не работает

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

Стили и темы — Иконки

Пакет KendoReact предоставляет более 400 встроенных значков шрифтов для своих компонентов.

Шрифты

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

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

Значки шрифтов

демонстрируют значительные преимущества, такие как:

• Улучшенная масштабируемость. В то время как спрайты значков представляют собой растровые изображения и плохо масштабируются, шрифты значков используют векторную графику, идеально выглядят на дисплеях Retina, а масштабирование выполняется так же просто, как установка параметра конфигурации размера шрифта .
• Улучшенные возможности дизайна — вы можете легко применять эффекты CSS на лету, устанавливая цвет текста, тень или другие параметры для различных состояний взаимодействия. Например, на :hover .
• Улучшенная поддержка браузера — значки шрифтов не зависят от браузера и поддерживаются всеми современными браузерами.
• Уменьшено количество HTTP-запросов. Чтобы загрузить значок шрифта, вам потребуется максимум несколько HTTP-запросов.
• Уменьшенный размер файла — файл размером 100 КБ содержит примерно 500 векторных значков.

Чтобы использовать значки шрифта KendoReact:

1. Загрузите тему KendoReact в свой проект.

2. Назначьте класс CSS k-icon , за которым следует предопределенный класс из списка значков шрифтов, тегу HTML. Например, , как показано в следующем примере.

    <диапазон>
    

Хотя шрифт веб-значков поставляется с набором предопределенных классов CSS, вам может потребоваться использовать значки с собственным именем класса CSS. Для этого установите значение псевдосодержимого :before для соответствующего значка.

 <диапазон>
 
<стиль>
  .my-custom-icon-class: перед {
    содержимое: "\e13a"; /* Добавляет глиф, используя номер символа Unicode */
  }

 

Шрифты

Icon поддерживают следующие параметры визуального улучшения:

• Аппликации разных размеров.
• Применение цветов значков.
• Переворачивание и вращение иконок.

Размеры

Размер всех значков Kendo UI по умолчанию составляет 16 пикселей (размер шрифта: 16 пикселей; ширина: 16 пикселей; высота: 16 пикселей). Однако пользовательский интерфейс Kendo предоставляет следующие предопределенные размеры значков:

.

• xsmall —Размер шрифта: 12 пикселей; Ширина: 12 пикселей; Высота: 12 пикселей.
• small —Размер шрифта: 14 пикселей; Ширина: 14 пикселей; Высота: 14 пикселей.
• средний —Размер шрифта: 16 пикселей; Ширина: 16 пикселей; Высота: 16 пикселей.
• большой —Размер шрифта: 20 пикселей; Ширина: 20 пикселей; Высота: 20 пикселей.
• xlarge — Размер шрифта: 24 пикселя; Ширина: 24 пикселя; Высота: 24 пикселя.
• xxlarge —Размер шрифта: 32 пикселя; Ширина: 32 пикселя; Высота: 32 пикселя.
• xxxlarge —Размер шрифта: 48 пикселей; Ширина: 48 пикселей; Высота: 48 пикселей.

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

• к-значок-кс
• к-значок-см
• k-icon-md
• k-icon-lg
• k-icon-xl
• k-icon-xxl
• k-icon-xxxl

 <диапазон>
<промежуток> 
<промежуток> 
 

Для значков шрифтов можно применить любой нестандартный размер с помощью CSS свойство размера шрифта .

 <диапазон>
<стиль>
    . k-значок-24 {
        размер шрифта: 24px; /* Устанавливает размер значка на 24 пикселя */
    }

 

Для значков SVG можно изменить размер с помощью свойств CSS width и height .

 <диапазон>
<стиль>
    .k-значок-24 {
        ширина: 24 пикселя;
        высота: 24 пикселя;
    }

 

цветов

Чтобы установить цвет значка, используйте кнопку 9.0012 цвет свойство CSS.

 <диапазон>
<промежуток> 
<стиль>
  .цветной значок {
    цвет: зеленый;
  }

 

Переворачивание и вращение

Чтобы лучше разместить значок в приложении, переверните его, используя предопределенные классы CSS k-flip-h и k-flip-v .

 <диапазон>
<промежуток> 
<промежуток> 
<промежуток> 
 

Вы также можете повернуть значок с помощью следующих предопределенных классов CSS:

• k-rotate-0 — Поворачивает значок на 0°.
• k-rotate-45 — Поворачивает значок на 45°.
• k-rotate-90 —Поворачивает значок на 90°.
• k-rotate-135 — Поворачивает значок на 135°.
• k-rotate-180 —Поворачивает значок на 180°.
• k-rotate-225 —Поворачивает значок на 225°.
• k-rotate-270 —Поворачивает значок на 270°.
• k-rotate-315 — Поворачивает значок на 315°.

 <диапазон>
 

Чтобы отобразить индикатор загрузки, используйте класс CSS k-i-loading . Вы можете настроить размер и цвет индикатора загрузки так же, как и другие значки.

 <диапазон>
<промежуток> 
<промежуток> 
 

• Действия
• Оповещения и уведомления
• Редактирование
• Файлы и папки
• Изображения
• Макет и навигация
• Картирование
• СМИ
• Социальный обмен
• Переключить

Действия

Пример

Просмотр исходного кода

Изменить тему:

Оповещения и уведомления

Пример

Просмотр исходного кода

Изменить тему:

Редактирование

Пример

Просмотр исходного кода

Изменить тему:

Файлы и папки

Пример

Просмотреть исходный код

Изменить тему:

Изображения

Пример

Просмотр исходного кода

Изменить тему:

Макет и навигация

Пример

Просмотр исходного кода

Изменить тему:

Картирование

Пример

Просмотр исходного кода

Изменить тему:

СМИ

Пример

Просмотр исходного кода

Изменить тему:

Пример

Просмотр исходного кода

Изменить тему:

Переключить

Пример

Просмотреть исходный код

Изменить тему:

• Темы и стили в KendoReact
• Начало работы с KendoReact
• Обзор компонентов

Назад

Настройка тем

Далее

Иконки SVG

Более 7000 шрифтов иконок, SVG, 3D-иконки и анимированные иконки с Unicons by IconScout

Оживите свои дизайны с помощью бесплатных иконочных шрифтов, значков SVG, 3D-значков и анимированные иконки с Unicons от IconScout. Являетесь ли вы дизайнер или разработчик, Unicons предоставит вам высококачественные значки в различных стилях значков, таких как линейные, монохромные, сплошные и тонкая линия.

Руководство по библиотеке Explore для разработчиков

Unicons теперь поддерживает 3D-анимацию и анимацию Lottie.

Unicons теперь включает в себя широкий выбор 3D и анимированных значков для воплотить ваши проекты в жизнь.

Новый Новый

Анимированный

Начните использовать иконки в качестве шрифта

Легко вставьте Unicons на свой сайт, написав всего несколько строк кода.

1

Добавить стиль

Скопируйте приведенный выше код в раздел страниц, где вы хотите использовать эти значки.

2

Добавить значки

Найдите значок и поместите его в раздел HTML-кода.

3

Стиль значка

Выберите правильный значок и легко измените размер, цвет и тон значка.

Используйте в своих любимых стилях

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

Бесплатно

Монохромный

Тонкая линия

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

Пиксельные значки

Работайте с единообразным пиксельным дизайном во всех категориях.

Более 7000 элементов упрощенного дизайна

Библиотека шрифтов значков, значков SVG, анимированных значков и 3D-значков.

Иконочные шрифты Web и SVG

Внедряйте шрифты значков Web и SVG в свои проекты с помощью одной простой строки кода.

20+ категорий

Доступно в популярных категориях, таких как бизнес, логотипы брендов, чат, общение и многое другое.

Ускорьте процесс разработки

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

Исследовать библиотеку

Начните работу со шрифтами значков, SVG, анимированными и 3D-значками

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

• Iconfonts

• Vue

• React

• Figma

9001 1

SVG

• glTF

• JSON

Доступ к Unicons напрямую из ваших любимых инструментов дизайна

Иконочные шрифты Unicons, значки SVG, анимированные значки и 3D-значки легко доступны в виде плагинов с популярными инструментами. Просто найдите и вставьте нужный значок простым перетаскиванием.

Фигма

AdobeXD

Гугл документы

Окна

Канва

Иллюстратор

Microsoft Word

Мак

Популярные проекты теперь строятся с использованием наших ресурсов и инструментов.

Бансари Векария

UX-дизайнер, минималист

«С активами креативного дизайна очень легко доносить свои идеи до заинтересованных сторон. Я обычно предпочитаю веб-сайт IconScout для поиска активов».

Вину Рамесан

Руководитель отдела анимации, Gojek

«LottieFiles идеально подходят для всех наших продуктов и услуг, чтобы вы чувствовали себя как дома».

Тулси Бхикадия

Дизайнер продукта/сотрудник UX, plexusMD

«IconScout — спаситель, когда дело доходит до поиска иллюстраций на очень нишевые темы, такие как врачи, медицина и многие другие отрасли».

Дон Велтри

Директор по маркетингу, РАЭК

«Очень удобные дизайнерские активы. Я всегда рад использовать их в своем продукте».

Амрит Пал

Создатель игрушечных лиц

«Люблю IconScout! Такая обширная библиотека дизайнерских ресурсов».

Санджиб Пол

Дизайнер, LottieFiles

«Iconscout — потрясающий инструмент… мне больше не нужно покидать свое рабочее место… все, что мне нужно, доступно прямо в XD»

Брайан Ли

Старший аниматор, headspace

«Лотти быстро интегрируется в мой рабочий процесс, занимает мало места, я могу быстро делиться идеями со своими командами».

Бансари Векария

UX-дизайнер, минималист

«С активами креативного дизайна очень легко доносить свои идеи до заинтересованных сторон. Я обычно предпочитаю веб-сайт IconScout для поиска активов».

Вину Рамесан

Руководитель отдела анимации, Gojek

«LottieFiles идеально подходят для всех наших продуктов и услуг, чтобы вы чувствовали себя как дома».

Тулси Бхикадиа

Дизайнер продукта/сотрудник UX, plexusMD

«IconScout — спаситель, когда дело доходит до поиска иллюстраций на очень нишевые темы, такие как врачи, медицина и многие другие отрасли».

Дон Велтри

Директор по маркетингу, РАЭК

«Очень удобные дизайнерские активы. Я всегда рад использовать их в своем продукте».

Амрит Пал

Создатель игрушечных лиц

«Люблю IconScout! Такая обширная библиотека дизайнерских ресурсов».

Санджиб Пол

Дизайнер, LottieFiles

«Iconscout — потрясающий инструмент… мне больше не нужно покидать свое рабочее место… все, что мне нужно, доступно прямо в XD»

Брайан Ли

Старший аниматор, headspace

«Лотти быстро интегрируется в мой рабочий процесс, занимает мало места, я могу быстро делиться идеями со своими командами».

Бансари Векария

UX Дизайнер, Минималист

«С активами креативного дизайна очень легко доносить свои идеи до заинтересованных сторон. Я обычно предпочитаю веб-сайт IconScout для поиска активов».

Вину Рамесан

Руководитель отдела анимации, Gojek

«LottieFiles идеально подходят для всех наших продуктов и услуг, чтобы вы чувствовали себя как дома».

Тулси Бхикадия

Дизайнер продукта/сотрудник UX, plexusMD

«IconScout — спаситель, когда дело доходит до поиска иллюстраций на очень нишевые темы, такие как врачи, медицина и многие другие отрасли».

Дон Велтри

Директор по маркетингу, РАЭК

«Очень удобные дизайнерские активы. Я всегда рад использовать их в своем продукте».

Амрит Пал

Создатель игрушечных лиц

«Люблю IconScout! Такая обширная библиотека дизайнерских ресурсов».

Санджиб Пол

Дизайнер, LottieFiles

«Iconscout — потрясающий инструмент… мне больше не нужно покидать свое рабочее место… все, что мне нужно, доступно прямо в XD»

Брайан Ли

Старший аниматор, headspace

«Лотти быстро интегрируется в мой рабочий процесс, занимает мало места, я могу быстро делиться идеями со своими командами».