В этой главе мы узнаем, как использовать CSS для создания иконок панели навигации.
Ресурс иконок использует иконки Font Awesome версии 4.7.
Вы можете обратиться к руководству по иконкам Font Awesome:Иконки Font Awesome
Вы можете напрямую импортировать стороннюю библиотеку CDN:
<link rel="stylesheet" href="../cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
Базовый HTML-код
<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: 100%; /*Полная ширина*/
background-color: #555; /*Задать фон*/
overflow: auto; /*Переполнение настраивается в соответствии с float*/
}
.icon-bar a {
float: left; /*Отображать элементы рядом друг с другом по горизонтали*/
text-align: center; /*Центрировать текст*/
width: 20%; /*Отображение одинаковой ширины (5 кнопок, каждая отображает 20%, 20% * 5 = 100%)*/
padding: 12px 0; /*Установить верхний и нижний внутренний отступ*/
transition: all 0.3s ease; /*Добавить эффект перехода для эффекта при наведении*/
color: white; /*Отображать текст белым*/
font-size: 36px; /*Увеличить размер шрифта*/
}
.icon-bar a:hover {
background-color: #000; /*Добавить цвет фона при наведении мыши на элемент*/
}
.active {
background-color: #0457AA; /*Добавьте цвет фона для выбранного элемента*/
}
Попробуйте сами »
Вертикальная панель навигации
Пример
.icon-bar {
width: 90px; /*Укажите ширину*/
background-color: #555; /*Задайте фон*/
}
.icon-bar a {
display: block; /*Сделайте так, чтобы ссылки располагались друг под другом, а не рядом*/
text-align: center; /*Центрируйте текст*/
padding: 16px; /*Задайте padding*/
transition: all 0.3s ease; /*Добавьте эффект перехода для эффекта при наведении*/
color: white; /*Белый текст*/
font-size: 36px; /*Увеличьте размер шрифта*/
}
.icon-bar a:hover {
background-color: #000; /*Добавьте цвет фона при наведении курсора мыши на элемент*/
}
.active {
background-color: #0457AA; /*Добавьте цвет фона для выбранного элемента*/
}
Попробуйте сами »