Учебник по Bootstrap 3

БС ДОМ БС Начать Базовая сетка BS Типография БС Таблицы БС Изображения БС БС Джамботрон БС Уэллс Оповещения о BS Кнопки БС Группы кнопок BS BS Глификоны Значки/этикетки BS Индикаторы прогресса BS БС Пагинация БС пейджер Группы списка BS БС Панели Выпадающие списки БС Свернуть БС Таблетки/таблетки BS БС Навбар БС Формы Входы БС Входы БС 2 Размер ввода BS Медиа-объекты BS БС Карусель BS Модальный Подсказка БС БС Поповер БС прокрутки BS-аффикс БС фильтры

Сетки начальной загрузки

Сетевая система БС BS Сложенный/горизонтальный BS Сетка Малая Сетка BS средняя BS Сетка Большая Примеры сетки BS

Загрузочные темы

Шаблоны БС Тема BS "Просто я" Тема BS "Компания" Тема BS "Группа"

Примеры начальной загрузки

Примеры БС викторина БС Упражнения Сертификат БС

Bootstrap CSS Ref

CSS все классы CSS типографика CSS-кнопки CSS-формы CSS-помощники CSS-изображения CSS-таблицы Выпадающие списки CSS CSS-навигация Глификоны

Bootstrap JS ссылка

JS-аффикс JS-оповещение JS-кнопка JS Карусель Свернуть JS Выпадающий список JS Модальный JS JS всплывающее окно JS прокрутка Вкладка JS JS-подсказка


Начальные глификоны


Глификоны

Bootstrap предоставляет 260 глификонов из набора Glyphicons Halflings.

Глификоны можно использовать в тексте, кнопках, панелях инструментов, навигации, формах и т. д.

Вот несколько примеров глификонов:

Глификон конверта:

Распечатать глификон:

Поисковый глификон:

Скачать глификон:


Синтаксис глификона

Глификон вставляется со следующим синтаксисом:

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

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


Пример глификона

В следующем примере показаны различные способы использования глификонов:

Пример

<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
  <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Search icon on a styled button:
  <button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
  <a href="#" class="btn btn-success btn-lg">
    <span class="glyphicon glyphicon-print"></span> Print
  </a>
</p>

Проверьте себя с помощью упражнений

Упражнение:

Используйте значение класса Glyphicon, чтобы диапазон отображался как значок «поиск».

<span class=""></span>


Полный справочник Bootstrap Glyphicon

Полный справочник по всем глификонам можно найти в нашем полном справочнике по глификонам Bootstrap .