Как сделать - Навбар с иконками

.icon-bar {
  width: 90px; /* Установите определенную ширину */
  background-color: #555; /* Темно-серый фон */
}

.icon-bar a {
  display: block; /* Сделайте так, чтобы ссылки отображались друг под другом, а не рядом друг с другом */
  text-align: center; /* Выровнять текст по центру */
  padding: 16px; /* Добавьте отступ */
  transition: all 0.3s ease; /* Добавить переход для эффектов наведения */
  color: white; /* Белый цвет текста */
  font-size: 36px; /* Увеличенный размер шрифта */
}

.icon-bar a:hover {
  background-color: #000; /* Добавьте цвет при наведении */
}

.active {
  background-color: #4CAF50; /* Добавить активный / текущий цвет */
}

.icon-bar {
  width: 100%; /* На всю ширину */
  background-color: #555; /* Темно-серый фон */
  overflow: auto; /* Переполнение из-за float */
}

.icon-bar a {
  float: left; /* Плавающие ссылки рядом */
  text-align: center; /* Выровнять текст по центру */
  width: 20%; /* Равная ширина (5 иконок шириной 20% каждая = 100%) */
  padding: 12px 0; /* Некоторые верхние и нижние отступы */
  transition: all 0.3s ease; /* Добавить переход для эффектов наведения */
  color: white; /* Белый цвет текста */
  font-size: 36px; /* Увеличенный размер шрифта */
}

.icon-bar a:hover {
  background-color: #000; /* Добавьте цвет при наведении */
}

.active {
  background-color: #4CAF50; /* Добавить активный / текущий цвет */
}