Bootstrap - Глификоны

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

Что такое глификоны?

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

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

Где найти глификоны?

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

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

Связанные правила CSS присутствуют в файлах bootstrap.css и bootstrap-min.css в папке css папки dist . Посмотреть доступные глификоны можно по этой ссылке ГЛИФИКОНЫ .

Применение

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

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

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

<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>
   
   User
</button>

<button type = "button" class = "btn btn-default btn-sm">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>

<button type ="button" class = "btn btn-default btn-xs">
   <span class = "glyphicon glyphicon-user"></span> 
   
   User
</button>