Навигационная панель из иконок

Пример

<!-- Добавляем библиотеку иконок -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="icon-bar">
  <a class="active" href="#"><i class="fa fa-home"></i></a>
  <a href="#"><i class="fa fa-search"></i></a>
  <a href="#"><i class="fa fa-envelope"></i></a>
  <a href="#"><i class="fa fa-globe"></i></a>
  <a href="#"><i class="fa fa-trash"></i></a>
</div>

Пример вертикальной панели

.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: #04AA6D; /* Цвет активной/текущей ссылки */
}

Пример горизонтальной панели

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

.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: #04AA6D; /* Цвет активной/текущей ссылки */
}