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

Иконки в формате шрифта для сайта

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

Что такое иконки в формате шрифта

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

Иконки в формате шрифта имеют следующие преимущества перед иконками в виде растровых изображений:

• Возможность применять к ним любые CSS стили, которые можно применять к обычному тексту;
• Хорошо масштабируются, т.к. иконки в формате шрифта являются векторными изображениями. Т.е. Вы можете увеличивать или уменьшать их размеры без потери качества;
• Меньшее количество HTTP-запросов, которое может потребоваться для их загрузки по сравнению с количеством HTTP-запросов, которых может потребоваться для загрузки иконок в виде растровых изображений;
• Более быстрая загрузка иконок, т. к. они имеют небольшой размер;
• Наборы иконок в формате шрифта поддерживаются всеми браузерами, из-за того что они поставляются в различных форматах: eot, ttf, woff, svg и др. Т.е. если браузер не имеет поддержку одного формата, то он использует другой;
• Большинство наборов иконок (Font Awesome, Glyphicons и др.) содержат в своём наборе иконки SVG (в формате шрифта), которые являются очень чёткими и отлично масштабируются.

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

Но иконки в формате шрифта кроме преимуществ, имеют ещё и следующие недостатки:

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

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

Иконки в формате шрифта невероятно просты в использовании.

Рассмотрим основные действия для работы с пакетами иконок в формате шрифта:

1. Скачать с сайта пакет иконок в формате шрифта, который вы хотите использовать на своём сайте. Рассмотрим наши действия на примере Font Awesome.

2. Скопировать и подключить файл CSS поставляемый вместе с пакетом иконок в формате шрифта. Если открыть данный файл, то Вы увидете, что он содержит инструкцию @font-face, которая подгружает шрифты и выполняет их настройку. Кроме этого, этот файл также может содержать правила CSS, с помощью которых упрощается работа с этим набором шрифтов.

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

3. Скопировать каталог «fonts», содержащий шрифты, в Вашу директорию на сайте. Если уже есть такая директория, то Вы можете просто скопировать содержимое каталога «fonts» в эту директорию.
4. В зависимости от пакета иконок, который Вы используете, значки обычно вставляются одним из двух способов:

• с помощью указания соответствующих классов в атрибуте class элемента i или span.

  <!-- Отображение иконки в Font Awesome -->
  <span></span>
  <i></i>
  

• с помощью указания номера значка в атрибуте data:

  <!--Шрифт Elegant Icon Font -->
  <!--Отображение иконки с помощью указания номера значка в атрибуте data -->
  <span data-icon="&#x3f;"></span>
  

<!-- Например, увеличить размер иконки в 4 раза с помощью класса Font Awesome fa-4x -->
<i></i>
<!-- Например, с помощью указания собственных правил CSS -->
<!-- Установим размер иконки и её цвет -->
<i></i>

CSS:
.large-green {
  font-size: 50px;
  color: green;
}
HTML:
<i></i>

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

Рассмотрим некоторые примеры, где можно использовать иконки в формате шрифта.

• Иконки можно использовать в кнопках:

  <button><i></i> Кнопка1</button>
  <button><i></i> Кнопка2</button>
  <button><i></i> Кнопка3</button>
  <button><i></i> Кнопка4</button>
  

• Иконки можно использовать в меню:

• Иконки можно использовать в различных информационных виджетах:

• Иконки можно использовать для создания социальных кнопок:

• Иконки можно использовать в кнопках, с помощью которых осуществляется работа с записями в таблице:

Популярные пакеты иконок в формате шрифта

Рассмотрим наиболее популярные пакеты иконок в формате шрифта.

Glyphicons

Font Awesome

Foundation Icon Fonts

Brandico

Elegant Icon Font

Themify Icons

Ionicons

Octicons

Open Iconic

Typicons

Stroke 7

Ligature symbols

Различные коллекции иконок

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

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

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. Собираем и отдаём шрифт нугет-пакетом

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

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

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

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

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

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

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

Иконочных шрифтов · GitHub

ionic-команда / ionicons

Иконки ручной работы премиум-класса, созданные Ionic, для приложений Ionic и веб-приложений по всему миру 🌎

Машинопись

16 585 2060

Обновлено

27 декабря 2022 г.

MfgLabs / mfglabs-iconset

Потрясающий значок веб-шрифта от MFG Labs

CSS

778 86

Обновлено

26 июля 2016 г.

шрифтелло / brandico.font

Шрифт с логотипами социальных сервисов и мессенджеров

HTML

302 63

Обновлено

20 октября 2016 г.

Стивенхатчинс / typicons.font

336-пиксельные универсальные векторные иконки в наборе веб-шрифтов

HTML

1403 227

Обновлено

23 июля 2021 г.

Keyamoon / IcoMoon-Free

Пакет плоских векторных иконок вместе с устанавливаемым лигатурным шрифтом

HTML

1273 320

Обновлено

13 марта 2016 г.

jhogue / PE-Analog-Clock-icon-font

Набор иконок для отображения визуального («аналогового») представления меток времени.

HTML

297 24

Обновлено

12 февраля 2016 г.

BanzaiTokyo / webhostinghub-glyphs

WebHostingHub Glyphs — это полный набор значков глифов, доступных в виде шрифта, полностью совместимых с Bootstrap и другими платформами и CMS

270 31

Обновлено

29 июля 2013 г.

google/материал-дизайн-иконки

иконок Material Design от Google

47 097 9479

Обновлено

, 13 января 2023 г.

Шрифты Foundation Icon 3 | Детская площадка от ZURB

Использование 283 значков с 1 шрифтом

Пользовательская коллекция из 283 значков, которые хранятся в удобном веб-шрифте. Просмотреть все значки »

Придайте им стиль с помощью CSS

Пара строк CSS и правильная разметка помогут вам быстро начать работу. Как их использовать »

Создавайте бесконечные варианты

Легко настраивайте эти значки любого размера, цвета и стиля в CSS. Посмотреть образцы »

Как они были построены

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

• Геометрический Все значки имеют базовые формы, такие как треугольники, квадраты, прямоугольники и круги.
• Скругленные углы Все значки сделаны со скругленными углами, чтобы сделать значки более мягкими и доступными.
• Толщина толстой линии Для всех значков выбрана более толстая линия, а не тонкая, чтобы значки можно было масштабировать, а также придать им дружественный вид, к которому мы стремимся.
• Естественные углы Мы задали эти конкретные градусы поворота, чтобы сохранить согласованность в наборе.
• Масштабируемость При создании этих значков мы думали о том, как эти значки будут масштабироваться при малых и больших размерах.

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

Как их использовать

Мы упростили вам работу с этими значками! Просто скачайте шрифт и следуйте этим простым инструкциям. Вы будете рок-н-ролл в кратчайшие сроки.

Слияние стилей

Очень легко подключить таблицы стилей пакета, чтобы воплотить в жизнь ваш новый иконочный веб-шрифт. Когда вы загрузите шрифты, вы сможете просто объединить файлы Foundation-icons.css и Foundation-icons.[eot/ttf/svg/woff] прямо в Foundation.

Напишите свою разметку

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

Стильный стиль!

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

Получите отличную работу по проектированию или проектированию продукта

через доску объявлений ZURB

Загрузите шрифты

Мы собрали несколько удобных пакетов для загрузки, которые легко впишутся в ваш проект Foundation!

Загрузите шрифт

Попробуйте Foundation

Если вы еще не пробовали Foundation, мы настоятельно рекомендуем это сделать. Вы будете программировать быстрее и лучше в кратчайшие сроки!

Посетите Фонд

Мысли?

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

Ищете старый набор?

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