На этом уроке вы узнаете, как использовать иконки Twitter Bootstrap 3.

Иконки Glyphicons

Twitter Bootstrap 3 включает в себя более 250 иконок в формате шрифта из набора Glyphicons Halflings. Библиотека Glyphicons Halflings не является бесплатной. Но разработчики этих иконок сделали некоторую часть из них доступной для использования в Twitter Bootstrap 3. Четвёртая версия Bootstrap не включает никакие наборы иконок в формате шрифта в свою стандартную поставку. Если они вам нужны, то придётся подключать необходимые наборы самостоятельно.

Стандартные иконки Twitter Bootstrap 3 (из набора Glyphicon Halflings)
Стандартные иконки фреймворка Bootstrap 3

Как подключить иконки Glyphicons Halflings

В стандартной сборке Twitter Bootstrap 3 иконки Glyphicons Halflings подключать не надо. Они и так уже подключены в файле CSS (bootstrap.css или bootstrap.min.css). Находятся иконки Glyphicons Halflings в каталоге fonts. В данной директории находятся несколько форматов (eot, svg, ttf, woff, woff2) одних и тех же иконок. Формат eot необходим для отображения иконок в старых браузерах Microsoft Internet Explorer (до 9 версии). Шрифт в формате ttf используется для отображения иконок в устаревших браузерах операционной системы Android (до версии 4.4). woff и woff2 – это форматы, которые используют все основные браузеры. Вторая версия формата шрифта (woff2) отличается от первой тем, что она имеет меньший размер. В настоящее время woff2 поддерживается браузерами Chrome 36+, Opera 26+, Firefox 35+. Шрифт в формате svg поддерживается только браузерами Safari (4.1 и ниже), работающими под управлением операционной системы iOS.

По умолчанию шрифты Glyphicons Halflings должны быть расположены относительно файла bootstrap.css или bootstrap.min.css следующим образом:
bootstrap.css -> родительский каталог -> папка fonts -> шрифты

Если иконки Bootstrap отображаются у вас на странице квадратиками, то проверьте, правильно ли у вас расположены шрифты, относительно файла bootstrap.css по вышеприведённой схеме.

Использование стандартных иконок Bootstrap

Добавление иконки Bootstrap на веб-страницу обычно осуществляется с помощью элемента span или i, к которому необходимо добавить базовый класс glyphicon и класс определённой иконки (например, иконки телефона - glyphicon-earphone).

<!-- Глификонка телефона -->
<!-- 1. С помощью элемента span -->
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
<!-- 2. С помощью элемента i -->
<i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>
Иконка телефона из набора Glyphicon Halflings
Bootstrap 3 - HTML код иконки телефона

Галерея иконок Bootstrap 3

Оформление иконок Bootstrap 3

Оформление иконок Glyphicons Halflings осуществляется также как и стилизация обычного текста.

Т.е. для того чтобы иконки Bootstrap изменить цвет, ей просто необходимо задать CSS-свойство color.

<!-- Например, с помощью атрибута style -->
<!-- --- Иконка "Стрелочка влево" --- -->
<i class="glyphicon glyphicon-arrow-left" aria-hidden="true" style="color: green;"></i>

Изменение размера иконки Glyphicon осуществляется с помощью CSS свойства font-size:

<!-- Например, увеличим размер иконки -->
<i class="glyphicon glyphicon-eye-open" style="font-size: 40px;"></i>

Добавление иконок Bootstrap к HTML-элементам

Помещение иконки "Звездочка" в кнопку выполняется следующим образом:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" style="color:blue;"></span> Избранное
</button>

Bootstrap 3 - Кнопка с иконкой

Примечание: Не забудьте оставить место между значком и текстом, чтобы обеспечить необходимое расстояние.


Использование иконок Bootstrap в качестве маркеров списка ul.

  1. Добавить класс icon для элемента ul:
    <!-- Маркированный список (ul li) -->
    <ul class="icon">
      <li>Содержимое 1 пункта</li>
      <li>Содержимое 2 пункта</li>
      <li>Содержимое 3 пункта</li>
    </ul>
    
  2. Подключить к странице CSS стили:
    ul.icon {
      /* список без стандартного маркера */
      list-style-type: none;
    }
    ul.icon li {
      /* отступ слева */
      text-indent: 0px;
    }
    ul.icon li:before {
      /* шрифт */
      font-family: 'Glyphicons Halflings';
      /* код иконки */
      content: "\e092";
      /* расположение блока с иконкой */
      float: left;
      /* ширина блока */
      width: 35px;
    }