Я использую значки в качестве навигации для приложения, которое я создаю. В настоящее время они отображаются горизонтально, как показано здесь: https://gyazo.com/bb7cbab48941ffd2e2d2b2fa5c748d72
Что мне нужно сделать, чтобы сделать этот стек вертикально? Вот мой код:
<!doctype html>
<html>
<head>
<style>
.navbar {
width: 100%;
background-color: #555;
}
.navbar a {
float: left;
text-align: center;
padding: 12px;
color: black;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover:not(.active) {
background-color: grey;
border-radius: 20px;
}
.active {
background-color: yellow;
border-radius: 20px;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<a class="active" href="#"><i class="fa fa-fw fa-align-justify"></i></a>
<a href="#"><i class="fa fa-fw fa-wifi"></i></a>
<a href="#"><i class="fa fa-fw fa-user"></i></a>
<a href="#"><i class="fa fa-fw fa-gear"></i></a>
</div>
</body>
</html>
Спасибо за любую помощь или совет!