Статьи

Введение в Icon Fonts с помощью Font Awesome и IcoMoon

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

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

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

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

Плюсы и минусы для значков шрифтов

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

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

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

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

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

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

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

Font Awesome Icons

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

Начало работы с Font Awesome

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

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

Для того, чтобы использовать значки, вы должны поместить их внутри элемента spani Затем вы должны назначить им два класса. Класс fafa-home В их шпаргалке вы можете увидеть названия всех доступных значков в пакете.

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

Теперь давайте рассмотрим три различных примера, в которых используется пакет значков Font Awesome.

Font Awesome Пример # 1

В этом первом примере мы создаем вертикальное меню навигации. Сначала мы оборачиваем значки внутри элемента ifa-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

В следующем примере мы создадим простую панель социальной сети. Для этого мы оборачиваем значки внутри элемента ifa-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

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

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

Иконы IcoMoon

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

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

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

Начало работы с IcoMoon

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

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

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

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

Давайте посмотрим на пример.

Пример IcoMoon

В этом примере мы будем использовать значки, чтобы создать section Мы оборачиваем значки внутри элемента span

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

И демо:

Вывод

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

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