UI-компоненты. Кнопка с иконкой на CSS

Создадим 5 красивых кнопок со значками на CSS, используя значки Font Awesome. В этом примере код HTML создает 5 кнопок с разными именами классов и включает значки Font Awesome внутри кнопок. Свойства display: flex и align-items: center используются для выравнивания значка и текста внутри кнопки. Каждая кнопка имеет свой цвет фона. Значки Font Awesome импортируются с использованием правила @import в CSS и стилизуются с использованием класса .fas.

HTML:

<button class="btn1"><i class="fas fa-heart"></i>Btn 1</button>
<button class="btn2"><i class="fas fa-star"></i>Btn 2</button>
<button class="btn3"><i class="fas fa-user"></i>Btn 3</button>
<button class="btn4"><i class="fas fa-envelope"></i>Btn 4</button>
<button class="btn5"><i class="fas fa-shopping-cart"></i>Btn 5</button>

CSS:

/* Импортируем иконки Font Awesome */
@import url("https://use.fontawesome.com/releases/v5.14.0/css/all.css");

/* Общие стили для кнопок */
button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  margin-right: 20px;
}

/* Небольшой отступ справа для иконки */
.fas {
  margin-right: 10px;
}

.btn1 {
  background-color: blue;
  color: white;
}

.btn2 {
  background-color: green;
  color: white;
}

.btn3 {
  background-color: orange;
  color: white;
}

.btn4 {
  background-color: red;
  color: white;
}

.btn5 {
  background-color: purple;
  color: white;
}