От автора: независимо от того, создаете ли вы веб-сайт, мобильное приложение или даже автономное приложение, вы не можете обойтись без определенных вещей. Правильное использование графики и иконок — одна из таких основных потребностей. Интересные иконки так же важны, как выравнивания и цветовые гаммы. Это потому, что одна иконка может выразить то, что не смогут сказать сотни слов!
Хотя существует множество способов добавления на веб-сайт иконок, самым популярным из них является использование Font Awesome. После того, как вы выполните необходимые настройки, добавить через 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 и нажмите кнопку “build font” — и БУМ! Ваш пользовательский шрифт будет загружен. Назовем его 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;
}
Это означает, что, когда мы определяем элемент иконки следующим образом, он наследует стили, такие как isplay, 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="css/font-more-awesome.css" rel="stylesheet">
Теперь вы можете использовать эти иконки, как любую другую иконку fa. Например, следующая иконка будет большой и вращающейся.
<i class="fa fa-troll fa-spin fa-lg"/>
Автор: Pubudu Dodangoda
Источник: https://medium.freecodecamp.org/
Редакция: Команда webformyself.