Bootstrap 3 - Иконки Glyphicons

Александр Мальцев
Александр Мальцев
79K
25
Bootstrap 3 - Иконки Glyphicons
Содержание:
  1. Иконки Glyphicons
  2. Как подключить иконки Glyphicons Halflings
  3. Как использовать стандартные иконки в Bootstrap 3
  4. Как подключить иконки Glyphicons к Bootstrap 4
  5. Комментарии

В этой статье рассмотрим набор шрифтовых иконок, включённых в сборку Bootstrap 3.4.1 по умолчанию. Это набор включает более 250 иконок в формате шрифта из пакета Glyphicon Halflings.

Иконки Glyphicons

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

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

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

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

В стандартной сборке 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 3

Добавление иконки 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 осуществляется также как и стилизация обычного текста.

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

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

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

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

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

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

<!-- Разделение иконки и текста с помощью пробела -->
<button type="button" class="btn btn-danger btn-lg">
  <span class="glyphicon glyphicon-star"></span> Избранное
</button>
<!-- Разделение иконки и текста с помощью   -->
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Избранное
</button>

Скриншот примера:

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

Не забудьте оставить место между значком и текстом, чтобы обеспечить необходимое расстояние. Например, посредством пробела или специсимвола &nbsp;.

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

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

Чтобы это осуществить необходимо:

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

Пример, как иконку можно поместить в элемент input:

Bootstrap - Как иконку можно поместить в элемент input
<style>
/* CSS */
.input-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  pointer-events: none;
  top: 25px;
}
.form-icon {
  position: relative;
}
.form-icon input {
  padding-left: 42.5px;
}
</style>
  
<!-- HTML -->
<div class="form-group form-icon">
  <label class="control-label" for="name-user">Имя пользователя:</label>
  <input class="form-control" id="name-user">
  <i class="glyphicon glyphicon-user input-icon" aria-hidden="true"></i>
</div>

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

В Bootstrap 4 нет встроенных шрифтовых иконок. Если хотите в Bootstrap 4 использовать шрифтовые иконки Glyphicons, которые были в Bootstrap 3, то это можно сделать следующим образом.

Во-первых, загрузите папку «fonts» из Bootstrap 3 в Bootstrap 4. Скачать архив Bootstrap 3 можно используя эту ссылку.

Во-вторых, создайте файл, например, «font-glyphicons.css» и поместите в него следующее содержимое. Данные стили нужны для того, чтобы иконки можно было более просто и удобно вставлять на страницу.

В-третьих, подключить файл «font-glyphicons.css» к странице с помощью тега link.

<link rel="stylesheet" href="css/font-glyphicons.css">

После этого использовать иконки Glyphicons в Bootstrap 4 можно будет также как и в Bootstrap 3:

<span class="glyphicon glyphicon-earphone"></span>

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

  1. D2207
    D2207
    11.08.2020, 20:13
    Добрый день! Имею бутстрап 4.5.0 + реакт, пытаюсь подключить иконки как Вы и говорили, скачал папку, добавил ссылку в HTML. А иконок нет.
    1. D2207
      D2207
      11.08.2020, 21:27
      Не обратил внимание на ссылки, привёл их к абсолютному виду и заработало
    2. Раиса
      Раиса
      24.02.2019, 01:11
      Здравствуйте. Как подключать глиф-иконки в бутстрап 4?
      1. Александр Мальцев
        Александр Мальцев
        25.02.2019, 14:48
        Здравствуйте. Добавил данную информацию в статью.
        1. Раиса
          Раиса
          26.02.2019, 23:26
          Спасибо большое. Пока использовала fontawesome, но обязательно попробую.
      2. anboza
        anboza
        30.03.2017, 16:37
        Доброго времени суток!
        Подскажит, кто знает.
        есть конструкция:
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseSix">Материалы<span class="glyphicon glyphicon-chevron-down" ></span></a>
        
        При нажатии, необходимо изменить цвет glyphicon…
        И… никакие методы не работают. Текст изменить — пожалуйста, хоть 100 порций, а символ — никак.
        Если вынести за тег
        <a></a>
        , все замечательно меняется, но внутри ссылки — никак.
        1. Александр Мальцев
          Александр Мальцев
          30.03.2017, 17:37
          Здравствуйте.
          Меняем данное значение на необходимое с помощью метода jQuery css (например, при клике на ссылку):
          $(function(){
            $('a[data-toggle="collapse"]').click(function(){
              $(this).find('.glyphicon-chevron-down').css('color', '#ff0000');
            });
          });
          
          1. anboza
            anboza
            30.03.2017, 17:57
            Спасибо за ответ! все работает.
            Но все же, понимания нет, почему, отрабатывая селектор :focus, я не могу достучаться до этого
            class="glyphicon glyphicon-chevron-down"

            только, если вынести за пределы ссылки, хотя текст принимает все настройки четко…
            Если найдете минуту разъяснить или линк какой, буду очень благодарен ))
            1. Александр Мальцев
              Александр Мальцев
              01.04.2017, 17:31
              Селектор :focus может быть применён к следующим элементам:
              • a или area с атрибутом href;
              • input, select, textarea, button (находящихся в активном состоянии);
              • iframe;
              • к любому элементу, имеющему атрибут tabindex.
              Т.е. к ссылке будет так:
              $(function(){
                $('a[data-toggle="collapse"]').focus(function(){
                  $(this).find('.glyphicon-chevron-down').css('color', '#ff0000');
                });
              });
              
              А если нужно к самой иконке, то необходимо сделать следующее:
              1. Добавить к иконке атрибут tabindex:
              <span class="glyphicon glyphicon-chevron-down" tabindex="0"></span>
              
              2. Использовать код:
              $(function(){
                $('.glyphicon-chevron-down').focus(function(){
                  $(this).css('color', '#ff0000');
                });
              });
              
        2. Shock
          Shock
          17.02.2016, 06:41
          Hi
          Уже с месяц заглядываю сюда, возможно каждый день за доками по бутстрапу, на официальном сайте так часто не бываю ;)
          решил написать-поблагодарить
          Спасибо тебе за то что ты делаешь!!!

          P.S. таким же как я посетителям напоминаю, что не забывайте кликать на баннеры ;)
          1. virtas
            virtas
            21.01.2016, 14:45
            Скажите а фото иконки вместо стандартных иконок как перекрутить?
            Скажим так, хотелось бы услышать мнения специалиста.
            1. Александр Мальцев
              Александр Мальцев
              21.01.2016, 16:38
              Да, конечно можно.
              Это можно сделать различными способами, например так:
              /*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. Александр Мальцев
              Александр Мальцев
              30.11.2015, 14:58
              Скорее всего у Вас что-то неправильно организовано.
              Скачайте пакет 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
                Dina
                02.12.2015, 11:23
                Александр, спасибо за ответ. Сижу, разбираюсь. Создала заново директорию. У меня сразу вопрос: Вы пишете, что подключить бутстрап можно добавив ссылку По Вашей структуре я бы сделала
                href="components/bootstrap/css/bootstrap.min.css
                Или это не имеет значения? меня всегда вводит в заблуждение указание пути, например, с точками ../../css
                Я все эти точки скрупулезно заменяю, в зависимости от того, где лежит файл index.html. Или это необязательно? но если не заменять, то у меня не работают ни css, ни javascript, ни fancybox (в случае последнего важно даже, чтобы box в fancyBox был с заглавной буквы!).
                А еще Вы предлагаете минимизированный файл bootstrap.min.css использовать, но в нем работать неудобно, я все настройки стилей карусели там прописываю, потому что если делайть в файле carousel.css, то тоже не работает.
                Элементарные вопросы, но я нигде не могу найти ответа, на всех сайтах это такая очевидность, что никто не обращает на эту деталь внимания :-) а я новичок-самоучка:-)
                Спасибо Вам огромное заранее за ответы.
                1. Александр Мальцев
                  Александр Мальцев
                  02.12.2015, 14:00
                  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
                    Dina
                    02.12.2015, 14:56
                    Да, Вы правы, надо все в специфических css-файлах прописывать. Я просто там с ошибками писала, (только что разобралась), и потому правила из специфических стилей не работали, вот и пошла в бутстрап. Спасибо!
                    То есть относительный путь отличается от абсолютного наличием слэша в начале? вот откуда «выйти вверх (на каталог выше)» — вообще непонятно. Пойду что ли википедию почитаю, или хабрахабр…
                    1. Александр Мальцев
                      Александр Мальцев
                      02.12.2015, 15:17
                      Выйти на вверх (на каталог выше) осуществляется с того места где находится этот файл, в котором Вы это прописываете.
              2. Dina
                Dina
                30.11.2015, 12:24
                Я установила шрифты, на сайте с десктопа иконки отображаются отлично. А вот в мобильной версии какие-то закорючки:-(
                Версия с компьютера заработала только тогда, когда в файле 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. Евгений
                  Евгений
                  20.11.2015, 11:17
                  по какой причине могут не отображаться иконки? вместо них отображаются квадратики
                  1. Александр Мальцев
                    Александр Мальцев
                    20.11.2015, 16:38
                    Проверьте есть ли у Вас в каталоге проекта 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. Дмитрий
                      Дмитрий
                      16.02.2016, 07:35
                      при переносе сайта у меня пропали эти файлы где я могу их скачать?
                      1. Александр Мальцев
                        Александр Мальцев
                        17.02.2016, 11:31
                        Из архива Bootstrap:
                        _https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
                        В архиве они расположены в каталоге fonts.
                  2. Андрей
                    Андрей
                    14.07.2015, 17:31
                    Не могу подобрать иконку для удаления. Что посоветуете?
                    1. Александр Мальцев
                      Александр Мальцев
                      16.07.2015, 12:29
                      Иконка «Удалить» есть во многих наборах.
                      Так что сначала необходимо определится с набором, а потом уже выбирать подходящую себе иконку.
                      Мне больше нравятся наборы Glyphicons и FontAwesome.
                      в Glyphicons есть 4 иконки «Удалить»: glyphicon-trash, glyphicon-remove, glyphicon-remove-sign, glyphicon-remove-circle.
                      В Font Awesome есть следующие иконки: fa-times, fa-trash, fa-trash-o.
                      1. Андрей
                        Андрей
                        17.07.2015, 13:05
                        Спасибо! Ваш сайт для меня — просто находка! Очень подробно, основательно раскрыли тему bootstrap. Удачи Вам!
                    Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.