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

Обзор

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;
}

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

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

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

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

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

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

• Чашка
• Большой палец вверх
• Лицо с улыбкой

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

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

Далее:

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

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

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

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

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

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

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

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

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

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

1. Меню File -> Generate Fonts...
2. Выбираем название 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>

Теперь, открыв файл index.html в браузере, мы должны увидеть следующее:

Ставьте лайки, подписывайтесь на блог.
Спасибо за внимание.