Bootstrap 5 Кнопки со значками

Bootstrap 5 поставляется с компонентом Badges, который показывает дополнительную последнюю информацию и метки для любого элемента. Наряду с обычными предложениями, значки также могут быть реализованы внутри элемента кнопки, чтобы отображать любую ссылку или счетчик уведомлений. В этой статье мы увидим использование значков на кнопках с помощью класса значков на кнопках.

Условие: Bootstrap 5 кнопок

Значки Кнопки Класс:

• badge : класс значка используется для отображения небольшого счетчика или точки уведомления.

Синтаксис

<button type="button" class="btn ...">
     ... <span class="badge ...">...</span>
</button>

Пример 1. Это пример отображения количества уведомлений внутри кнопок, но на значках не будет цвета.

Выход:

Пример 2: Вот пример значка, в котором кнопка с цветным значком уведомления.

Выход:

Примечание. Назначение значков Bootstrap — визуально отображать информацию. Так что обычный пользователь без труда разберется. Но для пользователей, которые не могут видеть и использовать программы чтения с экрана или некоторые вспомогательные технологии, значки будут отображаться как случайный текст после конца предложения.

Ссылка: https://getbootstrap.com/docs/5.0/components/badge/#buttons