Bootstrap - Глификоны
В этой главе мы обсудим глификоны, их использование и некоторые примеры. Bootstrap объединяет 200 глифов в формате шрифта. Давайте теперь разберемся, что такое глификоны.
Что такое глификоны?
Глификоны - это шрифты-иконки, которые вы можете использовать в своих веб-проектах. Глификоны Halflings не бесплатны и требуют лицензирования, однако их создатель сделал их доступными для проектов Bootstrap бесплатно.
«Рекомендуется, в качестве благодарности, мы просим вас включать необязательную обратную ссылку на GLYPHICONS, когда это возможно». - Документация по загрузке
Где найти глификоны?
Теперь, когда мы загрузили версию Bootstrap 3.x и понимаем структуру ее каталогов из главы « Настройка среды» , глификоны можно найти в папке шрифтов . Он содержит следующие файлы -
- 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>