от Pubudu Dodangoda

Независимо от того, создаете ли вы веб-сайт, мобильную программу или даже отдельную программу, есть несколько вещей, от которых вы никогда не сможете избежать. Правильное использование графики и значков является одной из основных потребностей. Причудливые значки так же важны, как выравнивание цветов. Это потому, что один значок может выразить то, что может сказать сто слов!

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

<i class="fa fa-bell"></i>

Однако бывают ситуации, когда набора значков, предоставленного Font Awesome, недостаточно. К примеру, недавно я хотел использовать логотипы Facebook, Twitter и Airbnb на веб-сайте. И это меня удивило — пиктограмма Airbnb не была включена в Font Awesome. Фактически, сообщество спрашивало о значке Airbnb 3 года назад. Однако иконки до сих пор нет в официальном наборе иконок.

Кроме того, если вам нужна не очень популярная специальная пиктограмма, наименее сложным способом ее добавления является использование img тег. Это слишком много работы по сравнению с использованием Font Awesome. С другой стороны, ребята из Font Awesome не могут удовлетворить все запросы по значкам, практически говоря.

Так что я искал простой способ получить нужные значки, не завися от третьей стороны. К счастью, я нашел инструмент под названием Calligraphr. Сейчас я объясню, как я использовал этот инструмент, некоторые знания CSS и несколько других простых трюков, чтобы сделать следующее в своем коде:

<i class="fa fa-troll"/><i class="fa fa-like-a-boss"/><i class="fa fa-lol"/>

Достаточно круто, правда? Затем давайте создадим Font More Awesome!

Создание шрифта

Первая веха на нашем пути — создание шрифта Font More Awesome с помощью инструкций на их веб-сайте. Первый шаг – загрузить шаблон. Вот пример:

Теперь нам нужно заполнить эти поля желаемыми значками. Вы можете распечатать и нарисовать значки вручную или использовать инструменты, такие как Adobe Photoshop или GIMP, чтобы использовать изображения, загруженные из Интернета.

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

Следующее, что вам нужно сделать, достаточно просто. Просто загрузите заполненный шаблон на веб-сайт calligraphr и нажмите кнопку «создать шрифт» – и БУМ! Ваш собственный шрифт будет загружен. Давайте назовем это FontMoreAwesome.otf

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

Интеграция с Font Awesome

Конечно, можно рассматривать новый файл шрифта как отдельный набор значков. Но не было бы круто, если бы мы могли расширить сам шрифт Font Awesome? Давайте сделаем это!

Здесь вы должны понимать одну вещь: мы унаследуем правила CSS, определенные файлом CSS Font Awesome. Например, он будет содержать следующую запись:

.fa {  display: inline-block;  font: normal normal normal 14px/1 FontAwesome;  font-size: inherit;  text-rendering: auto;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}

Это означает, что когда мы определяем элемент значка следующим образом, он будет наследовать такие стили, как display, font-sizeи text-rendering из вышесказанного.

<i class="fa fa-troll"/>

Теперь давайте определим наш собственный CSS файл. Давайте назовем файл font-more-awesome.css

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

@font-face {    font-family: 'FontMoreAwesome';    src: url('../fonts/FontMoreAwesome.otf');    font-weight: normal;    font-style: normal;}

Тогда мы можем легко определить пользовательские иконки, которые нам нужны:

.fa-troll:before {    font-family: FontMoreAwesome;    content: "A";}.fa-lol:before {    font-family: FontMoreAwesome;    content: "B";}.fa-like-a-boss:before {    font-family: FontMoreAwesome;    content: "C";}

Обратите внимание, что мы определяем значки как псевдоэлементы с помощью before селектор. Таким образом, мы можем вставить нужное содержимое в элемент, использующий эти классы.

В шрифте FontMoreAwesome, который мы создали, A, B и C представлены пиктограммами Troll, Lol и Like-a-boss соответственно. Однако это не самый лучший способ сделать это.

Font Awesome использует Unicode Private Use Area (PUA), чтобы программы считывания с экрана не считывали случайные символы, представляющие значки.

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

Еще одна вещь, указанная в приведенном выше примере, заключается в том, что мы заменяем семейство шрифтов, определенное Font Awesome, при вводе собственного содержимого.

Давайте использовать Font More Awesome

Последним шагом является загрузка этого файла CSS в файл index.html, что достаточно легко.

<link href=" rel="stylesheet">

Теперь вы можете использовать эти значки как любые другие fa значок. К примеру, следующий значок будет большим и будет вращаться.

<i class="fa fa-troll fa-spin fa-lg"/>

Вам понравилась эта история? Тогда одна маленькая вещь, которую вы можете сделать…