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

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

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

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

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

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

  • 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>

Посмотреть результат




Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok