Дело не в том, чтобы быстро бегать, а в том, чтобы выбежать пораньше (Ф. Рабле).

Bootstrap — Glyphicons

Главное меню » Учебное пособие по framework Bootstrap » Bootstrap — Glyphicons

18.05.2017

Время чтения: 2 мин.

В этой главе мы поговорим о Glyphicons, его использования и некоторые примеры. в Bootstrap 200 глифов в формате шрифта. Давайте теперь понимаем, что есть Glyphicons.

Что Glyphicons?

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

«Рекомендуется, в качестве благодарности, мы просим Вас включить дополнительную ссылку на GLYPHICONS, когда это практически возможно». — документация Bootstrap

Где найти Glyphicons?

Теперь, когда мы загрузили версию Bootstrap 3.x и поняли его структуру каталогов из раздела Настройки окружающей среды, glyphicons можно найти в папке шрифтах. Он содержит следующие файлы:

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Связанные правила CSS присутствуют в файлах bootstrap.css и bootstrap-min.css в папке дистрибутива CSS. Вы можете увидеть доступные glyphicons по этой ссылке GLYPHICONS.

Применение

Чтобы использовать значки, просто используйте следующий код где-нибудь в вашем коде. Оставьте пространство между иконкой и текстом для надлежащего заполнения.

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

Следующий пример демонстрирует Glyphicons:

<p>
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes-alt"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order"></span>
   </button>
   
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order-alt"></span>
   </button>
</p>

<button type = "button" class = "btn btn-default btn-lg">
   <span class = "glyphicon glyphicon-user"></span>
   
   Пользователь
</button>

<button type = "button" class = "btn btn-default btn-sm">
   <span class = "glyphicon glyphicon-user"></span> 
   
   Пользователь
</button>

<button type ="button" class = "btn btn-default btn-xs">
   <span class = "glyphicon glyphicon-user"></span> 
   
   Пользователь
</button>

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.