Bootstrap - Иконки

На этом уроке вы узнаете, как использовать иконки 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;
    }
    


   Bootstrap 0    24566 0

Комментарии (16)

  1. Андрей # 0
    Не могу подобрать иконку для удаления. Что посоветуете?
    1. Александр Мальцев # 0
      Иконка «Удалить» есть во многих наборах.
      Так что сначала необходимо определится с набором, а потом уже выбирать подходящую себе иконку.
      Мне больше нравятся наборы Glyphicons и FontAwesome.
      в Glyphicons есть 4 иконки «Удалить»: glyphicon-trash, glyphicon-remove, glyphicon-remove-sign, glyphicon-remove-circle.
      В Font Awesome есть следующие иконки: fa-times, fa-trash, fa-trash-o.
      1. Андрей # 0
        Спасибо! Ваш сайт для меня — просто находка! Очень подробно, основательно раскрыли тему bootstrap. Удачи Вам!
    2. Евгений # 0
      по какой причине могут не отображаться иконки? вместо них отображаются квадратики
      1. Александр Мальцев # 0
        Проверьте есть ли у Вас в каталоге проекта fonts шрифты glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff и glyphicons-halflings-regular.woff2. А также то, что они подключены в файле bootstrap.min.css или bootstrap.css в зависимости от того, который Вы используете.
        1. Дмитрий # 0
          при переносе сайта у меня пропали эти файлы где я могу их скачать?
          1. Александр Мальцев # 0
            Из архива Bootstrap:
            _https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
            В архиве они расположены в каталоге fonts.
      2. Dina # 0
        Я установила шрифты, на сайте с десктопа иконки отображаются отлично. А вот в мобильной версии какие-то закорючки:-(
        Версия с компьютера заработала только тогда, когда в файле bootstrap.css поменяла ссылки на шрифты на такие:
        font-face {
        @font-family: 'Glyphicons Halflings';

        src=«fonts/glyphicons-halflings-regular.eot»;
        src=«fonts/glyphicons-halflings-regular.eot?#iefix» format('embedded-opentype'), src=«fonts/glyphicons-halflings-regular.woff2» format('woff2'), src=«fonts/glyphicons-halflings-regular.woff» format('woff'), src=«fonts/glyphicons-halflings-regular.ttf» format('truetype'), src=«fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular» format('svg');
        }
        До этого были url в круглых скобках. Вообще я не до конца разобралась, когда надо использовать url, а когда сразу указывать папку со шрифтами. И если оставлять путь к папке, как он изначально указан в бутстрапе (../../fonts/), то есть с точками перед названием папки, то он никогда не работает (ни Javascript, ни CSS). По крайней мере у меня. Это нормально, или я что-то не так делаю?

        Спасибо!
        1. Александр Мальцев # 0
          Скорее всего у Вас что-то неправильно организовано.
          Скачайте пакет Bootstrap и попробуйте организовать структуру своего сайта следующим образом:
          site/
          ├── components/
          │   ├── bootstrap/
          │   │   ├── css/
          │   │   │   └── bootstrap.min.css
          │   │   ├── js/
          │   │   │   └── bootstrap.min.js
          │   │   └── fonts/
          │   │        ├── glyphicons-halflings-regular.eot
          │   │        ├── glyphicons-halflings-regular.svg
          │   │        ├── glyphicons-halflings-regular.ttf
          │   │        ├── glyphicons-halflings-regular.woff
          │   │        └── glyphicons-halflings-regular.woff2
          │   └── jquery/
          │        └── jquery.min.js
          │
          └── index.html
          
          Каталог components будем использовать для того чтобы туда помещать компоненты, необходимые для работы сайта. Например, Bootstrap, jQuery и др. Правильная организация не только упростит структуру, но и обновление компонентов.

          В файле index.html в разделе head подключите:
          <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
          
          1. Dina # 0
            Александр, спасибо за ответ. Сижу, разбираюсь. Создала заново директорию. У меня сразу вопрос: Вы пишете, что подключить бутстрап можно добавив ссылку По Вашей структуре я бы сделала
            href="components/bootstrap/css/bootstrap.min.css
            Или это не имеет значения? меня всегда вводит в заблуждение указание пути, например, с точками ../../css
            Я все эти точки скрупулезно заменяю, в зависимости от того, где лежит файл index.html. Или это необязательно? но если не заменять, то у меня не работают ни css, ни javascript, ни fancybox (в случае последнего важно даже, чтобы box в fancyBox был с заглавной буквы!).
            А еще Вы предлагаете минимизированный файл bootstrap.min.css использовать, но в нем работать неудобно, я все настройки стилей карусели там прописываю, потому что если делайть в файле carousel.css, то тоже не работает.
            Элементарные вопросы, но я нигде не могу найти ответа, на всех сайтах это такая очевидность, что никто не обращает на эту деталь внимания :-) а я новичок-самоучка:-)
            Спасибо Вам огромное заранее за ответы.
            1. Александр Мальцев # 0
              components/bootstrap/css/bootstrap.min.css — это правильно, я внизу привёл это просто для примера… Создание правильной структуры в последующем облегчит Вам жизнь и обновление компонентов.
              А зачем Вы так мучаете файл bootstrap.css? Что он Вам такого сделал? Что же Вы будете делать когда выйдет новая версия Bootstrap? Как Вы будете его обновлять?

              Есть пути относительные и абсолютные.
              Относительные пути идут от текущего расположения. Поэтому когда Вы в файлах CSS прописываете некоторый путь, то это надо учитывать. Т.е. если в файле CSS укажите такой url — components/bootstrap/fonts/glyphicons-halflings-regular.svg, то это будет ошибкой. Т.к. в папке css нет каталога components.
              А если такой (абсолютный путь) — /components/bootstrap/fonts/glyphicons-halflings-regular.svg — то ошибки не будет, если конечно каталог components находится в корне сайта.
              Но в основном необходимо использовать относительный путь. Для этого Вам необходимо выйти вверх (на каталог выше) и войти в каталог fonts — ../fonts/glyphicons-halflings-regular.svg. Для выхода на один каталог вверх используется две точки.

              Если Ваш сайт размещён на Linux, то там имена файлов регистрозависимые. Т.е. файл a.js и A.js — это разные файлы.
              1. Dina # 0
                Да, Вы правы, надо все в специфических css-файлах прописывать. Я просто там с ошибками писала, (только что разобралась), и потому правила из специфических стилей не работали, вот и пошла в бутстрап. Спасибо!
                То есть относительный путь отличается от абсолютного наличием слэша в начале? вот откуда «выйти вверх (на каталог выше)» — вообще непонятно. Пойду что ли википедию почитаю, или хабрахабр…
                1. Александр Мальцев # 0
                  Выйти на вверх (на каталог выше) осуществляется с того места где находится этот файл, в котором Вы это прописываете.
          2. virtas # 0
            Скажите а фото иконки вместо стандартных иконок как перекрутить?
            Скажим так, хотелось бы услышать мнения специалиста.
            1. Александр Мальцев # 0
              Да, конечно можно.
              Это можно сделать различными способами, например так:
              /*CSS*/
              .btn.icon-book span {
              background: url(images/icon-book.png);
              }
              .btn.icon-star span {
              background: url(images/icon-star.png);
              }
              .btn.icon span{
              padding-left: 24px;
              background-repeat: no-repeat;
              background-size: 18px 18px;
              }
              
              <!-- HTML -->
              <button class="btn btn-default btn-lg icon icon-book"><span>Текст кнопки</span></button>
              <a class="btn btn-default btn-lg icon icon-star" href="#"><span>Текст кнопки</span></a>
              
            2. Shock # 0
              Hi
              Уже с месяц заглядываю сюда, возможно каждый день за доками по бутстрапу, на официальном сайте так часто не бываю ;)
              решил написать-поблагодарить
              Спасибо тебе за то что ты делаешь!!!

              P.S. таким же как я посетителям напоминаю, что не забывайте кликать на баннеры ;)

              Вы должны авторизоваться, чтобы оставлять комментарии.