Что такое Icon Fonts? Знакомимся с помощью FontAwesome и IconMoon.

Перевод статьи:  An Introduction to Icon Fonts with Font Awesome and IcoMoon.
Автор:  George Martsoukos.

На сегодняшний день Icon Fonts (или «шрифтовые иконки») пользуются огромной популярностью у веб-разработчиков, которые все чаще используют их в своих работах. И если вы еще не знакомы с этим понятием, то данная статья поможет вам сделать свои первые шаги в этом направлении.

Здесь я продемонстрирую отличные решения, которые могут быть достигнуты с помощью Icon Fonts, однако давайте сначала познакомимся с самим понятием шрифтовых иконок, а также с положительными и отрицательными сторонами их использования. Затем мы протестируем два самых популярных набора шрифтовых иконок с помощью различных примеров, что позволит вам увидеть как они могут быть использованы в реальных проектах.

Что такое Icon Fonts?

Icon Fonts — это не что иное, как обычные шрифты. Отличие лишь в том, что вместо привычных для нас наборов шрифтов, состоящих из цифр и букв, шрифтовые иконки содержат различные символы и глифы. Но основная причина популярности Icon Fonts в Веб заключается в том, что они с легкостью поддаются CSS стилизации.

Достоинства и недостатки шрифтовых иконок.

Существует несколько веских положительных моментов, свидетельствующих в пользу применения шрифтовых иконок вместо растровых изображений:

  • К ним можно применить любой CSS эффект.
  • Они масштабируемы, поскольку создаются с помощью векторной графики. Это позволяет увеличивать или уменьшать их без потери качества.
  • Загрузка производится посредством единственного, в крайнем случае, пары HTTP запросов, вместо большого их количества, которые могут потребоваться для загрузки растровых изображений.
  • Они загружаются быстрее, что связано с их малыми размерами.
  • Их поддержка имеется во всех браузерах (даже таких как IE6).

Итак, получается, что шрифтовые пиктограммы идеально подходят для любых случаев? Конечно, нет. Несмотря на то, что они являются отличным средством улучшения дизайна, им также присущи некоторые ограничения. Так, к примеру, если вместо обычной иконки вы хотите показать сложное изображение, то Icon Fonts вам не поможет.

Они, к тому же, зачастую ограничены одним цветом, что можно изменить лишь применив некоторые CSS трюки. Более того, шрифтовые иконки создаются под определенные сеточные шаблоны, так их размеры могут быть 16х16, 32х32, 48х48 пикселей есть, конечно, и другие варианты. И если вы измените используемую сеточную систему на другую с размерностью, к примеру, 25х25, то того же четкого результата вы можете уже не получить (однако ситуацию можно исправить с помощью определенных CSS свойств).

Стоит также упомянуть о том, что помимо шрифтовых иконок существует и другое не менее популярное средство реализации векторных пиктограмм — это SVG иконки. Они позволяют обойти некоторые ограничения, свойственные шрифтовым иконкам. Так, например, вы сможете использовать более одного цвета для их оформления.

Оставшаяся часть статьи будет посвящена базовому описанию следующих двух библиотек шрифтовых иконок:

Вашему вниманию также будут представлены четыре примера различного использования Icon Fonts.

Пиктогаммы FontAwesome.

FontAwesome представляет собой богатую коллекцию иконок, состоящую из 439 экземпляров. Эта библиотека абсолютно бесплатна как для личного, так и для коммерческого использования. Изначально она разрабатывалась с целью использования в рамках системы Bootstrap, однако ее применение не ограничивается исключительно этим фреймворком.

Начинаем работать с FontAwesome.

Самый удобный путь включения иконок FontAwesome в свой проект лежит через CDN (сеть доставки контента). Если же вам необходимо работать off-line, то без загрузки полного пакета иконок вам не обойтись.

Необходимо также отыскать и включить в директорию сайта CSS файл и сгенерированную системой папку, содержащую шрифты различных форматов. Далее добавляем в HTML разметку фрагмент кода, подключающий наш CSS файл. В заключение следует убедиться в корректности путей, используемых в URL адресах параметров @font-face и src скачанного CSS файла, которые должны совпадать с соответствующей директорией вашего сайта. Для того, чтобы узнать все возможные способы включения этой библиотеки иконок в свой проект, обратитесь к прилагаемой инструкции, описывающей необходимые шаги по ее подключению.

Эти иконки должны размещаться внутри элемента span либо i, которым необходимо назначить два класса. Первый — это класс fa, а имя второго должно соответствовать имени пиктограммы, которую вы хотите использовать, к примеру, fa-home. Имена всех доступных в данной библиотеке иконок перечислены в прилагаемой памятке.

Для дополнительной настройки вида иконок можно применять другие предопределенные классы, которые представлены здесь вместе с примерами их использования.

Что же, давайте увидим пакет FontAwesome в действии, используя его в различных ситуациях.

FontAwesome — пример первый.

Для начала давайте займемся созданием вертикального навигационного меню. Первое, что необходимо сделать, это обернуть нужные иконки в элементы i и увеличить их до размера, соответствующего величине их контейнера, что достигается использованием предопределенного класса fa-2x. Далее производим необходимую CSS стилизацию.

Вот пример разметки для двух элементов навигационного меню:

<li>
<a href="#" data-name="Home">
<i class="fa fa-home fa-2x"></i>
</a>
</li>
<li>
<a href="#" data-name="About">
<i class="fa fa-bullhorn fa-2x"></i>
</a>
</li>

А это соответствующий CSS код:

nav li {
background: #ededed;
height: 80px;
width: 80px;
line-height: 80px;
text-align: center;
}

nav li:not(:first-child) {
margin-top: 1px;
}

nav li a {
outline: none;
position: relative;
width: 100%;
height: 100%;
}

nav i {
color: steelblue;
vertical-align: middle;
}

nav li a:after {
background: #ededed;
content: attr(data-name);
display: none;
margin-left: 1px;
width: 160px;
height: 80px;
left: 80px;
position: absolute;
font-size: 1.2em;
}

nav li a:hover:after {
display: inline-block;
}

Вот результат:

See the Pen Font Awesome Icon Font example #1 by SitePoint (@SitePoint) on CodePen.

FontAwesome — пример второй.

В следующем примере мы создадим простейшую панель социальных сетей. Для этого поместим нужные иконки в элементы i, удвоим их размер с помощью класса fa-2x, чтобы заполнить область контейнера, и оформим их соответствующим образом посредством CSS.

HTML код для одной иконки выглядит вот так:

<a href="#" title="Like us!">
<i class="fa fa-facebook fa-2x"></i>
</a>

А это код для стилизации:

section a {
padding: 7px;
color: black;
}

section i {
vertical-align: middle;
transition: color .3s ease-in-out;
}

section a:nth-child(1):hover i {
color: #3b5998;
}

Результат такой работы:

See the Pen Font Awesome Icon Font Example #2 by SitePoint (@SitePoint) on CodePen.

FontAwesome — пример третий.

В этом, третьем примере мы применяем иконки к форме входа в аккаунт. Выполняем действия, аналогичные первым двум примерам. Отличие лишь в том, что здесь мы используем другой предопределенный класс fa-fx, фиксируя тем самым из ширину (равную примерно 1,25 em).

HTML и CSS код схож с приведенными выше вариантами. Ниже вы можете увидеть результат их работы:

See the Pen Font Awesome Icon Font Example #3 by SitePoint (@SitePoint) on CodePen.

Обратите внимание, в этом случае мы используем те же иконки, что и в примере создания социальных кнопок.

Иконки IcoMoon.

Другим популярным решением шрифтовых иконок является IcoMoon, в рамках которого представлены два пакета. Первый можно использовать свободно, а второй Premium, предусматривающий расширенные возможности. Дополнительную информацию по этим двум пакетам иконок можно найти здесь. В зависимости от выбранного варианта вам будет доступно различное количество иконок и их формат. Так, к примеру, бесплатная версия содержит 450 экземпляров, а максимальная — 1266.

Помимо этих пакетов, IcoMoon предоставляет онлайн приложение, позволяющее выполнять поиск и загрузку более 3500 бесплатных иконок. Данное приложение, к тому же можно использовать для некоторых простейших операций по редактированию иконок, которым можно отнести их ротацию, смену цвета и другое.

Здесь вам также предоставляется возможность внедрения собственных пиктограмм или даже создания собственных наборов шрифтовых иконок. Для этого имеется несколько бесплатных и платных тарифов (с базовыми и расширенными возможностями).

Принцип работы с IcoMoon.

Выбранный вами для загрузки пакет содержит иконки различных форматов (таких, к примеру, как SVG, AI или PSD). При этом данный веб-сервис позволяет загружать пиктограммы как в SVG формате (мы не будем этого делать), так и в виде шрифтовых иконок.

По окончании загрузки иконок вам необходимо включить в состав своего проекта CSS файл и папку, содержащую сгенерированные системой шрифты различного формата, убедившись в соответствии содержащихся в параметрах @font-face и src URL адресов их реальным адресам в вашем проекте.

Существует также возможность включения ссылки быстрого использования непосредственно в ваш HTML код (будем считать ее ссылкой на CDN) и после этого вы можете использовать выбранные иконки. Однако эта опция постоянно доступна только в максимальной версии, хотя в базовой версии она тоже присутствует, правда лишь временно, только на один день.

Аналогично иконкам из рассмотренной выше библиотеки FontAwesome, каждая из иконок IcoMoon тоже должна быть включена в состав элемента <span>. Затем вам следует присвоить элементу класс, имя которого должно соответствовать имени пиктограммы, которую вы хотите включить в ваш проект (например, icon-home). Кроме того у вас есть возможность редактирования имен иконок (т.е. вы можете устанавливать свой префикс вместо используемого по умолчанию). Это делается до загрузки пиктограмм через вкладку Preferences (Предпочтения).

Давайте обратимся к примеру.

Пример использования IcoMoon.

В этом примере мы будем использовать иконки для создания раздела section, отражающего рабочий процесс нашей компании. Как и полагается, мы включим пиктограммы в элементы span, а затем произведем необходимые CSS настройки для их стилизации.

Вот разметка для двух иконок:

<li>
<span class="icon-pencil"></span>
Analyze
</li>
<li> + </li>
<li>
<span class="icon-paint-format"></span>
Design
</li>
<li> + </li>

Наш CSS код:

section li:nth-child(even) {
color: #ededed;
width: 6%;
font-size: 2.5em;
height: 63px;
margin-top: 31.5px;
line-height: 63px;
}

section span {
padding: 15px 0;
font-size: 5em;
display: block;
color: steelblue;
transition: all .2s ease-in-out;
}

section li:hover span {
transform: translateY(-10px);
}

Результат работы последнего примера можно увидеть здесь.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *