Иконки в формате шрифта для сайта

Содержание:
  1. Что такое иконки в формате шрифта
  2. Использование иконок в формате шрифта
  3. Примеры использования иконок в формате шрифта
  4. Популярные пакеты иконок в формате шрифта
  5. Комментарии

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

Что такое иконки в формате шрифта

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

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

  • Возможность применять к ним любые CSS стили, которые можно применять к обычному тексту;
  • Хорошо масштабируются, т.к. иконки в формате шрифта являются векторными изображениями. Т.е. Вы можете увеличивать или уменьшать их размеры без потери качества;
  • Меньшее количество HTTP-запросов, которое может потребоваться для их загрузки по сравнению с количеством HTTP-запросов, которых может потребоваться для загрузки иконок в виде растровых изображений;
  • Более быстрая загрузка иконок, т.к. они имеют небольшой размер;
  • Наборы иконок в формате шрифта поддерживаются всеми браузерами, из-за того что они поставляются в различных форматах: eot, ttf, woff, svg и др. Т.е. если браузер не имеет поддержку одного формата, то он использует другой;
  • Большинство наборов иконок (Font Awesome, Glyphicons и др.) содержат в своём наборе иконки SVG (в формате шрифта), которые являются очень чёткими и отлично масштабируются.

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

Но иконки в формате шрифта кроме преимуществ, имеют ещё и следующие недостатки:

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

Использование иконок в формате шрифта

Иконки в формате шрифта невероятно просты в использовании.

Рассмотрим основные действия для работы с пакетами иконок в формате шрифта:

  1. Скачать с сайта пакет иконок в формате шрифта, который вы хотите использовать на своём сайте. Рассмотрим наши действия на примере Font Awesome.

    Набор иконок в формате шрифта Font Awesome
  2. Скопировать и подключить файл CSS поставляемый вместе с пакетом иконок в формате шрифта. Если открыть данный файл, то Вы увидете, что он содержит инструкцию @font-face, которая подгружает шрифты и выполняет их настройку. Кроме этого, этот файл также может содержать правила CSS, с помощью которых упрощается работа с этим набором шрифтов.

    HTML
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  3. Скопировать каталог "fonts", содержащий шрифты, в Вашу директорию на сайте. Если уже есть такая директория, то Вы можете просто скопировать содержимое каталога "fonts" в эту директорию.
  4. В зависимости от пакета иконок, который Вы используете, значки обычно вставляются одним из двух способов:
    • с помощью указания соответствующих классов в атрибуте class элемента i или span.
      HTML
      <!-- Отображение иконки в Font Awesome -->
      <span class="fa fa-signal"></span>
      <i class="fa fa-signal"></i>
    • с помощью указания номера значка в атрибуте data:
      HTML
      <!--Шрифт Elegant Icon Font -->
      <!--Отображение иконки с помощью указания номера значка в атрибуте data -->
      <span data-icon="&#x3f;"></span>
  5. При необходимости можно настроить отображения иконки с помощью стилей CSS.
    HTML
    <!-- Например, увеличить размер иконки в 4 раза с помощью класса Font Awesome fa-4x -->
    <i class="fa fa-camera-retro fa-4x"></i>
    <!-- Например, с помощью указания собственных правил CSS -->
    <!-- Установим размер иконки и её цвет -->
    <i class="fa fa-camera-retro" style="font-size:50px; color: green;"></i>

    Но стили для иконок обычно не задают с помощью атрибута style, для этого используют классы:

    CSS
    .large-green {
      font-size: 50px;
      color: green;
    }
    HTML:
    <i class="fa fa-camera-retro large-green"></i>

Примеры использования иконок в формате шрифта

Рассмотрим некоторые примеры, где можно использовать иконки в формате шрифта.

  • Иконки можно использовать в кнопках:

    HTML
    <button class="btn btn-lg btn-default"><i class="glyphicon glyphicon-cloud-download"></i> Кнопка1</button>
    <button class="btn btn-lg btn-warning"><i class="glyphicon glyphicon-tree-deciduous"></i> Кнопка2</button>
    <button class="btn btn-lg btn-danger"><i class="glyphicon glyphicon-alert"></i> Кнопка3</button>
    <button class="btn btn-lg btn-primary"><i class="glyphicon glyphicon-send"></i> Кнопка4</button>

  • Иконки можно использовать в меню:

    Иконки в меню
  • Иконки можно использовать в различных информационных виджетах:

    Иконки в информационных виджетах
  • Иконки можно использовать для создания социальных кнопок:

    Социальные кнопки
  • Иконки можно использовать в кнопках, с помощью которых осуществляется работа с записями в таблице:

    Иконки в таблицах

Популярные пакеты иконок в формате шрифта

Рассмотрим наиболее популярные пакеты иконок в формате шрифта.

Glyphicons

Иконки в формате шрифта Glyphicons


Font Awesome

Иконки в формате шрифта Font Awesome


Foundation Icon Fonts

Иконки в формате шрифта Foundation


Brandico

Иконки в формате шрифта Brandico


Elegant Icon Font

Иконки в формате шрифта Elegant


Themify Icons

Иконки в формате шрифта Themify


Ionicons

Иконки в формате шрифта Ionicons


Octicons

Иконки в формате шрифта Octicons


Open Iconic

Иконки в формате шрифта Open Iconic


Typicons

Иконки в формате шрифта Typicons


Stroke 7

Иконки в формате шрифта Stroke-7


Ligature symbols

Иконки в формате шрифта Ligature symbols


Различные коллекции иконок

Сайт flaticon.com, на котором собраны различные коллекции иконок


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

Vlad
Vlad
В примере с кнопками иконки не отображаются, по крайней мере в Opera.