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

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

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

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

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

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

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

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

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

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

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

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

• Font Awesome
• IcoMoon

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

Font Awesome Icons

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

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

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

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

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

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

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

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

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

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

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