Andrey Smirnov

Posted on May 21, 2022 • Edited on Sep 20

Делаем свой Font Awesome шрифт

#fontawesome #font #css #svg

Обзор

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

Нам достаточно написать небольшой HTML код, и картинка будет у нас на сайте:

<i class="fa-solid fa-thumbs-up"></i>

Но почему просто нельзя разместить картинку с помощью тега img?

<img src="/thumbs-up.svg" />

При таком размещении мы не сможем изменять цвет картинки, например, при наведении указателя мышки над картинкой, а так же применять css transitions к цвету. Конечно, есть решения на основе css filters https://stackoverflow.com/a/50942954, но это усложняет читаемость и поддержку кода.
Есть ещё один метод изменять цвет картинки - добавлять inline svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path fill="#0000ff" d="M128 447.1V223.1c0-17.67-14.33-31.1-32-31.1H32c-17.67 0-32 14.33-32 31.1v223.1c0 17.67 14.33 31.1 32 31.1h64C113.7 479.1 128 465.6 128 447.1zM512 224.1c0-26.5-21.48-47.98-48-47.98h-146.5c22.77-37.91 34.52-80.88 34.52-96.02C352 56.52 333.5 32 302.5 32c-63.13 0-26.36 76.15-108.2 141.6L178 186.6C166.2 196.1 160.2 210 160.1 224c-.0234 .0234 0 0 0 0L160 384c0 15.1 7.113 29.33 19.2 38.39l34.14 25.59C241 468.8 274.7 480 309.3 480H368c26.52 0 48-21.47 48-47.98c0-3.635-.4805-7.143-1.246-10.55C434 415.2 448 397.4 448 376c0-9.148-2.697-17.61-7.139-24.88C463.1 347 480 327.5 480 304.1c0-12.5-4.893-23.78-12.72-32.32C492.2 270.1 512 249.5 512 224.1z"/>
</svg>

Атрибут fill отвечает за цвет.
Но проще всего изменять цвет css стилями:

.icon {
  color: red;
}

Так же можно упаковывать svg картинки в реакт компоненты, делать image sprites и т.д., пишите в комментариях если хотите статью на эти темы.

Итак, в этой статье мы:

Создадим свой шрифт, который будет состоять из трёх векторных изображений;
Конвертируем наш шрифт в woff и woff2 форматы для оптимизации размера;
Напишем css стили для удобного добавления символов шрифта на страницы сайта.

1. Создаём шрифт

Для создания шрифта нам понадобятся две open source программы:

FontForge - редактор шрифтов;
Inkscape - редактор векторной графики.

Загружаем и устанавливаем эти программы, а так же загружаем три изображения в формате svg, из которых мы будем делать шрифт:

Обратите внимание на то, что большой палец и лицо с улыбкой имеют разрешение: 512x512, а чашка: 640x512. Для того чтобы символы шрифта были центрированы, нам необходимо привести их к единому разрешению. В этом примере мы выберем разрешение 512x512. Значит, разрешение чашки придётся изменить, а изображение вписать и центрировать в новое разрешение. Для этого нам понадобится Inkscape.

Открываем нашу чашку в Inkscape;
Заходим в меню File -> Document Properties...;
Во вкладке Page в разделе Custom size выбираем Units: px - размер в пикселях. И там же устанавливаем разрешение Width и Height в 512; В результате мы получим блюдце и ручку чашки, выступающие за поля изображения:

Нажимаем на изображение чашки;
В меню выбираем Object -> Transform -> Scale, устанавливаем единицы измерения в px, устанавливаем галочку Scale proportionally, Width устанавливаем в 512 и нажимаем Enter, после чего величина Height должна пропорционально измениться. Результат:

Теперь нам нужно расположить изображение по центру, для этого:

В меню выбираем Object -> Align and Distribute...;
Relative to выбираем Page, и нажимаем на значки выравнивания по центру, по горизонтали и вертикали.

В результате получаем картинку по центру холста:

Осталось только сохранить результат в svg файле:

Меню File -> Save As...;
Выбираем формат Plain SVG (*.svg) и нажимаем кнопку Save.

В итоге у нас получилось изображение в svg формате с разрешением 512x512 пикселей. Все три картинки с одинаковым разрешением.

Теперь можно приступить к работе с FontForge:

Открываем программу;
Нажимаем на кнопку New для создания нового проекта;
Выбираем, например, букву s от слова smile и дважды кликаем мышкой на пустую клетку под буквой s. Должен открыться редактор символа.
Открываем меню File -> Import..., Format -> SVG, выбираем файл лицо с улыбкой и нажимаем OK.
Закрываем редактор символа, после чего под буквой s мы увидим наше изображение с улыбкой.
Повторяем действия для двух оставшихся картинок, для чашки я выбрал букву c, для пальца вверх букву t. В результате у нас под буквами s, c и t должны появиться изображения:

Осталось только сохранить результат в файл шрифта:

Меню File -> Generate Fonts...
Выбираем название icons.ttf и нажимаем кнопку Generate, затем Yes.

Поздравляю, наш шрифт готов!

2. Конвертируем наш шрифт в `woff` и `woff2` форматы

Для конвертации шрифта из формата ttf в woff и woff2 я написал небольшую консольную утилиту, которую вы можете скачать с https://github.com/druxax/font-conv.
Для установки необходимо скачать и в консоли перейти в каталог утилиты font-conv, затем выполнить команды:

npm pack
sudo npm install -g font-conv-cli-1.0.0.tgz

После установки в консоли заходим в каталог со шрифтом и запускаем утилиту конвертации:

font-conv-cli

После завершения работы утилита создаст каталог в той же папке с названием font-conv-res - в нём будут находиться два файла сконвертированных шрифтов с расширениями woff и woff2.
Переместите все 3 файла шрифта в одну папку fonts и мы приступим к последнему пункту - добавим шрифт на страницу сайта.

3. Добавляем шрифт на сайт

Подготовим html шаблон нашего сайта, создадим файл index.html.

<!DOCTYPE html>
<html>
  <head>
    <title>Font Excellent</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Font Excellent</h1>
    <!-- TODO -->
  </body>
</html>

Создадим файл styles.css и подключим в нём наш шрифт.

@font-face {
  font-family: "Font Excellent";
  src: url("fonts/icons.woff2") format('woff2'),
       url("fonts/icons.woff") format('woff'),
       url("fonts/icons.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
}

Добавим в styles.css стили для символов шрифта.

/* Общие настройки для всех символов шрифта */
.icon::before {
  display: inline-block;
  font-family: "Font Excellent";
  font-size: 8rem;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Для лица с улыбкой */
.icon-smile::before {
  content: "\0073";
}
/* Для пальца вверх */
.icon-thumbs-up::before {
  content: "\0074";
}
/* Для чашки */
.icon-cup::before {
  content: "\0063";
}

/* Анимация цвета и другие стили */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon {
  margin: 0 1rem;
  animation: color-animation 4s linear infinite;
}
.icon-cup {
  --color-1: #df8453;
  --color-2: #4195b8;
  --color-3: #e4a3a2;
}
.icon-smile {
  --color-1: #dfaf48;
  --color-2: #aed4d0;
  --color-3: #bff2a7;
}
.icon-thumbs-up {
  --color-1: #aed4d0;
  --color-2: #e19c9b;
  --color-3: #a9cfcb;
}
@keyframes color-animation {
  0%    {color: var(--color-1)}
  32%   {color: var(--color-1)}
  33%   {color: var(--color-2)}
  65%   {color: var(--color-2)}
  66%   {color: var(--color-3)}
  99%   {color: var(--color-3)}
  100%  {color: var(--color-1)}
}

Здесь мы выбрали общие настройки для icon класса и указали содержимое - кодировку символа для каждого класса наших картинок content: "\XXXX", где XXXX - CSS Entity значение. При создании шрифта, его символами мы выбрали буквы c, s и t, например, у знака s CSS Entity - 0073. Если в FontForge кликнуть на символ, то под строкой меню можно увидеть кодировку символов. Например, кликнув на t его код будет указан в виде U+0074, значит, в css мы запишем: content: "\0074";.

С css мы закончили, осталось только добавить в наш html шаблон наши картинки.

<!DOCTYPE html>
<html>
<head>
  <title>Font Excellent</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Font Excellent</h1>
  <div>
    <i class="icon icon-cup"></i>
    <i class="icon icon-smile"></i>
    <i class="icon icon-thumbs-up"></i>
  </div>
</body>
</html>