Как создать: навигационную панель иконок

Как создать панель иконок

Шаг 1 - Добавить HTML:

Добавить библиотеку иконок
<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>

Шаг 2 - Добавить CSS:

Уровень вертикали

.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; /* Добавить цвет активности/текущего состояния */
}

Попробуйте сами

Связанные страницы

Урок:CSS-навигационная панель

Урок:Уроки по иконкам