Как сделать - Панель иконок
Узнать, как создавать панели значков с помощью CSS.
Создать панель иконок
Шаг 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: #4CAF50; /* Добавить активный/текущий цвет */
}Редактор кода »Пример вертикальные
.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: #4CAF50; /* Добавить активный/текущий цвет */
}Редактор кода »Связанные страницы
Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигационных панелях.
Совет: Зайдите на наш учебник Иконки, чтобы узнать больше о значках.
