Заслуга отца на сына не распространяются (М. Сервантес).

Bootstrap – Glyphicons

1 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
18 мая 2017
Bootstrap - Glyphicons
В этой главе мы поговорим о 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.

Просмотров: 97

Если статья понравилась, то поделитесь ей в социальных сетях:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close