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

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

Подключаем пакеты Bootrstrap 5 CSS и Font Awesome

1. В заголовке вашей странице подключаем Bootstrap 5 CSS и Font Awesome, добавив следующую ссылку на CDN между тегами head.

<!-- Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

2. Далее добавляем сами кнопки на вашу страницу.

<button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="fa fa-check"></i></span>Подтвердить</button>
<button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i class="fa fa-remove"></i></span>Отмена</button>
<button type="button" class="btn btn-labeled btn-warning"><span class="btn-label"><i class="fa fa-bookmark"></i></span>Закладки</button>
<button type="button" class="btn btn-labeled btn-primary"><span class="btn-label"><i class="fa fa-camera"></i></span>Фото</button>
<button type="button" class="btn btn-labeled btn-default"><span class="btn-label"><i class="fa fa-chevron-left"></i></span>Пред</button>
<button type="button" class="btn btn-labeled btn-default"><span class="btn-label"><i class="fa fa-chevron-right"></i></span>След</button>
<button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="fa fa-thumbs-up"></i></span>Нравится</button>
<button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i class="fa fa-thumbs-down"></i></span>Не нравится</button>
<button type="button" class="btn btn-labeled btn-info"><span class="btn-label"><i class="fa fa-refresh"></i></span>Обновить</button>
<button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i class="fa fa-trash"></i></span>Удалить</button>

3. Так же немного поднастраиваем стили кнопок для использования в них значков:

.btn-label {
	position: relative;
	left: -12px;
	display: inline-block;
	padding: 6px 12px;
	background: rgba(0, 0, 0, 0.15);
	border-radius: 3px 0 0 3px;
}

.btn-labeled {
	padding-top: 0;
	padding-bottom: 0;
}

.btn {
	margin-bottom: 10px;
}

Собственно всё, таким образом вы можете использовать различные иконки для своих кнопок. Стоит заметить, что иконки очень помогают в восприятии их функционального назначения и это хороший плюс в их использовании.

Cсылка на пример: Демо / Скачать архив