Последние новости:

Поиск по сайту:

Неподражаемое как раз и вызывает большинство подражателей (Мария Эшенбах).

Bootstrap — Glyphicons

1 мин для чтения
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
18.05.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.

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

Читайте также

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Статьи партнеров:

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x

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

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

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

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

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

close

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

close