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>
