52 lines
3.0 KiB
Markdown
52 lines
3.0 KiB
Markdown
|
---
|
|||
|
title: Icons
|
|||
|
localeTitle: Иконки
|
|||
|
---
|
|||
|
## Иконки
|
|||
|
|
|||
|
Рамка Bootstrap предоставляет вам Glyphicons для значка. Bootstrap по умолчанию не включает библиотеку значков, но для вас есть несколько рекомендаций. Хотя большинство наборов иконок включают в себя несколько форматов файлов, мы предпочитаем реализацию SVG для их улучшенной доступности и векторной поддержки.
|
|||
|
|
|||
|
### Как пользоваться
|
|||
|
|
|||
|
Чтобы использовать значок Bootstrap, создайте тег span с `glyphicon` базового класса и отдельным классом значков. Используйте его только для элементов, которые не содержат текстового содержимого и не имеют дочерних элементов.
|
|||
|
|
|||
|
**Пример кода:**
|
|||
|
|
|||
|
`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`
|
|||
|
|
|||
|
`<span class="glyphicon glyphicon-cog"></span>`
|
|||
|
|
|||
|
Структура Bootstrap предоставляет вам более 250 значков, называемых глифами. Они входят в формат шрифта из набора Glyphicon Halflings.
|
|||
|
|
|||
|
### Как пользоваться
|
|||
|
|
|||
|
Чтобы использовать значки начальной загрузки, вы просто создаете `<span>` и применяете применимый класс CSS для значка. Пример кода приведен ниже.
|
|||
|
|
|||
|
**Пример кода:**
|
|||
|
|
|||
|
`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`
|
|||
|
|
|||
|
### Список классов Glyphicon Bootstrap
|
|||
|
|
|||
|
Это пример классов CSS, которые bootstrap предоставляет для глификонов. Более того, они доступны [здесь](https://getbootstrap.com/docs/3.3/components/#glyphicons)
|
|||
|
|
|||
|
`.glyphicon glyphicon-plus` Это значок плюса / добавления бутстрапа.
|
|||
|
|
|||
|
`.glyphicon glyphicon-trash` Это значок мусора / удаления бутстрапа.
|
|||
|
|
|||
|
_Примечание. Не включайте точку в атрибуте класса HTML, ссылаясь на классы с точкой, используется только при настройке классов в CSS._
|
|||
|
|
|||
|
### Иконка «Bootstrap» в кнопках
|
|||
|
|
|||
|
```html
|
|||
|
|
|||
|
<button type="button" class="btn btn-default" aria-label="Left Align">
|
|||
|
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
|
|||
|
</button>
|
|||
|
```
|
|||
|
|
|||
|
_Примечание. Значок Glyphicons Bootstrap недоступен при загрузке V4_
|
|||
|
|
|||
|
### Дополнительная информация:
|
|||
|
|
|||
|
* [Бутстрап Глификон Icons Doc](https://getbootstrap.com/docs/3.3/components/#glyphicons)
|