В этой статье рассказывается о глификонах, ее использовании и некоторых примерах. 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>

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


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



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok