Знакомство с иконочными шрифтами, начиная с Font Awesome и IcoMoon

Знакомство с иконочными шрифтами

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

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

Что такое иконочные шрифты?

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

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

Есть несколько значительных выгод в использовании иконочных шрифтов по сравнению с растровыми изображениями в ваших проектах. Вот некоторые из них:

Вы можете применить к ним любой CSS эффект.

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

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

Они быстро загружаются благодаря маленькому размеру.

Они поддерживаются всеми браузерами (даже вплоть до IE6).

Итак, применимы ли иконочные шрифты во всех случаях? Нет, конечно нет. Они являются отличным способом улучшить дизайн вашего проекта, но они также имеют свои ограничения. Например, если вы хотите показать сложное изображение (композицию) вместо простой иконки, тогда иконочные шрифты – не самое лучшее решение.

К ним также обычно может быть применен только один цвет, если только вы не будете использовать дополнительные CSS приемы. Более того, иконочные шрифты разработаны в соответствии с определенными сетками, например, 16×16, 32×32, 48×48 и т.д. Если по какой-то причине вы решите изменить сетку на 25×25, скорее всего вы не получите идеальный результат (определенные CSS свойства также могут помочь).

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

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

Мы рассмотрим 4 разных примера, в которых используются иконочные шрифты.

Иконки Font Awesome

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

Начинаем знакомство с Font Awesome

Самый простой способ использовать Font Awesome в вашем проекте – это использовать сеть доставки (распространения) контента (CDN). Если, однако, вы работаете оффлайн, то вам нужно будет загрузить архив с данной библиотекой.

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

Чтобы использовать иконки, вам необходимо поместить их внутрь элемента span или элемента i. Затем вам нужно присвоить им два класса. Класс fa плюс второй класс, который является именем самой иконки, которую вы хотели бы использовать, например, fa-home. В их памятке вы увидите имена всех имеющихся у них иконок.

Дополнительные предустановленные классы позволяют вам легко изменять иконки. Более подробную информацию об этих классах и примерах их использования вы найдете по этой ссылке.

Давайте теперь посмотрим на три разных примера использования иконок Font Awesome.

Font Awesome пример №1

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

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

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

Результат показан в следующем демо-примере:

Font Awesome пример №2

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

HTML разметка для отдельной иконки выглядит так:

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

И соответствующие CSS стили для оформления иконок:

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

А вот и демо-пример:

Font Awesome пример №3

В третьем примере мы используем иконки для формы авторизации. Иконки мы используем также, как и в предыдущих примерах. Мы просто добавляем другой предустановленный класс fa-fx для иконок, чтобы задать им фиксированную ширину (приблизительно 1.25em).

Код HTML и CSS похож на предыдущие примеры. А вот и сам результат:

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

Иконки IcoMoon

IcoMoon – является еще одним популярным решением, позволяющим использовать иконочные шрифты. Данная библиотека содержит два комплекта иконок: один является бесплатным, другой относится к премиум классу (включающим все доступные опции). Более подробно об этих комплектах вы можете прочитать здесь. В зависимости от выбранного комплекта, количество и формат доступных иконок будет отличаться. Например, количество иконок для бесплатного комплекта составляет 450, а для платного –1266.

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

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

Начинаем знакомство с IcoMoon

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

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

Также есть возможность использовать специальную ссылку для «быстрого старта», которую можно напрямую вставить в ваш HTML документ (рассматривайте ее, как ссылку на CDN), а затем вы сможете использовать выбранные иконки. Однако такая возможность есть только для безлимитного тарифного плана. Базовый тарифный план также предоставляет данную возможность, но ее использование ограничено одним днем.

Также, как и в случае с иконками Font Awesome, для использования иконок IcoMoon вам нужно поместить каждую иконку внутрь элемента span. Затем вам необходимо добавить класс, который является именем интересующей вас иконки, например, icon-home. Вы также можете изменять имена иконок (вместо префикса по умолчанию, вы можете определить ваш собственный префикс) во вкладке «Предпочтения», перед загрузкой иконочных шрифтов. Давайте рассмотрим пример.

IcoMoon пример

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

HTML разметка для двух иконок выглядит следующим образом:

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

И демо-пример:

Заключение

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

Автор: George Martsoukos

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree