Делаем свой Font Awesome шрифт
Tags: fontawesome, font, css, svg
Published: 2022-05-21 14:48:55

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

![Thumbs up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgqtgowtu9pfs9othp7h.png)
Нам достаточно написать небольшой `HTML` код, и картинка будет у нас на сайте:
```html
<i class="fa-solid fa-thumbs-up"></i>
```
Но почему просто нельзя разместить картинку с помощью тега `img`?
```html
<img src="/thumbs-up.svg" />
```
При таком размещении мы не сможем изменять цвет картинки, например, при наведении указателя мышки над картинкой, а так же применять `css transitions` к цвету. Конечно, есть решения на основе `css filters` [https://stackoverflow.com/a/50942954](https://stackoverflow.com/a/50942954), но это усложняет читаемость и поддержку кода.
Есть ещё один метод изменять цвет картинки - добавлять `inline svg`:
```html
<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` стилями:
```css
.icon {
   color: red;
}
```
Итак, в этой статье мы:
1. Создадим свой шрифт, который будет состоять из трёх векторных изображений;
2. Конвертируем наш шрифт в `woff` и `woff2` форматы для оптимизации размера;
3. Напишем `css` стили для удобного добавления символов шрифта на страницы сайта.

## 1. Создаём шрифт
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wb1f3tyv3j1i9qqrv3p.png)
Для создания шрифта нам понадобятся две open source программы:
- [FontForge](https://fontforge.org) - редактор шрифтов;
- [Inkscape](https://inkscape.org) - редактор векторной графики.

Загружаем и устанавливаем эти программы, а так же загружаем три изображения в формате `svg`, из которых мы будем делать шрифт:
- [Чашка](https://fontawesome.com/icons/mug-saucer?s=solid)
- [Большой палец вверх](https://fontawesome.com/icons/thumbs-up?s=solid)
- [Лицо с улыбкой](https://fontawesome.com/icons/face-smile?s=solid)

Обратите внимание на то, что `большой палец` и `лицо с улыбкой` имеют разрешение: `512x512`, а `чашка`: `640x512`. Для того чтобы символы шрифта были центрированы, нам необходимо привести их к единому разрешению. В этом примере мы выберем разрешение `512x512`. Значит, разрешение `чашки` придётся изменить, а изображение вписать и центрировать в новое разрешение. Для этого нам понадобится `Inkscape`.
1. Открываем нашу `чашку` в `Inkscape`;
2. Заходим в меню `File` -> `Document Properties...`;
3. Во вкладке `Page` в разделе `Custom size` выбираем `Units`: `px` - размер в пикселях. И там же устанавливаем разрешение `Width` и `Height` в `512`;
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvauhrdxv04l84zizyl8.png)
В результате мы получим блюдце и ручку чашки, выступающие за поля изображения:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ycf35w1xgmy7izxa7jkz.png)

Далее:
1. Нажимаем на изображение `чашки`;
2. В меню выбираем `Object` -> `Transform` -> `Scale`, устанавливаем единицы измерения в `px`, устанавливаем галочку `Scale proportionally`, `Width` устанавливаем в `512` и нажимаем `Enter`, после чего величина `Height` должна пропорционально измениться.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zequtgeyxkno7paw8aj9.png)
Результат:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5w9cxs9bqxaytdbde8ow.png)

Теперь нам нужно расположить изображение по центру, для этого:
1. В меню выбираем `Object` -> `Align and Distribute...`;
2. `Relative to` выбираем `Page`, и нажимаем на значки выравнивания по центру, по горизонтали и вертикали.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ho0yrwk5ew3zmcjhwoej.png)

В результате получаем картинку по центру холста:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ng45jg38oq3aoivygcco.png)

Осталось только сохранить результат в `svg` файле:
1. Меню `File` -> `Save As...`;
2. Выбираем формат `Plain SVG (*.svg)` и нажимаем кнопку `Save`.

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

Теперь можно приступить к работе с `FontForge`:
1. Открываем программу;
2. Нажимаем на кнопку `New` для создания нового проекта;
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rg8yy7ulzlokfistd52z.png)
3. Выбираем, например, букву `s` от слова `smile` и дважды кликаем мышкой на пустую клетку под буквой `s`. Должен открыться редактор символа.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ati9u1dkxdkdrfug8pa2.png)
4. Открываем меню `File` -> `Import...`, `Format` -> `SVG`, выбираем файл `лицо с улыбкой` и нажимаем `OK`.
5. Закрываем редактор символа, после чего под буквой `s` мы увидим наше изображение с улыбкой.
6. Повторяем действия для двух оставшихся картинок, для `чашки` я выбрал букву `c`, для `пальца вверх` букву `t`.
В результате у нас под буквами `s`, `c` и `t` должны появиться изображения:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wbe0lym0kk6o0onmgon.png)

Осталось только сохранить результат в файл шрифта:
1. Меню `File` -> `Generate Fonts...`
2. Выбираем название `icons.ttf` и нажимаем кнопку `Generate`, затем `Yes`.

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

## 2. Конвертируем наш шрифт в `woff` и `woff2` форматы
Для конвертации шрифта из формата `ttf` в `woff` и `woff2` я написал небольшую консольную утилиту, которую вы можете скачать с [https://github.com/druxax/font-conv](https://github.com/druxax/font-conv).
Для установки необходимо скачать и в консоли перейти в каталог утилиты `font-conv`, затем выполнить команды:
```console
npm pack
sudo npm install -g font-conv-cli-1.0.0.tgz
```
После установки в консоли заходим в каталог со шрифтом и запускаем утилиту конвертации:
```console
font-conv-cli
```
После завершения работы утилита создаст каталог в той же папке с названием `font-conv-res` - в нём будут находиться два файла сконвертированных шрифтов с расширениями `woff` и `woff2`.
Переместите все 3 файла шрифта в одну папку `fonts` и мы приступим к последнему пункту - добавим шрифт на страницу сайта.

## 3. Добавляем шрифт на сайт
Подготовим `html` шаблон нашего сайта, создадим файл `index.html`.
```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` и подключим в нём наш шрифт.
```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` стили для символов шрифта.
```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](https://www.w3schools.com/cssref/css_entities.asp) значение. При создании шрифта, его символами мы выбрали буквы `c`, `s` и `t`, например, у знака `s` CSS Entity - `0073`. Если в `FontForge` кликнуть на символ, то под строкой меню можно увидеть кодировку символов. Например, кликнув на `t` его код будет указан в виде `U+0074`, значит, в `css` мы запишем: `content: "\0074";`.

С `css` мы закончили, осталось только добавить в наш `html` шаблон наши картинки.
```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` в браузере, мы должны увидеть следующее:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxjynee4aiiox47dwwew.gif)

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