This coding is for the image navbar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation Bar | rahulpgupta</title>
<style type="text/css">
@import "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css";
body{
margin: 0;
padding: 0;
}
ul{
margin: 0;
padding: 0;
width: 100%;
}
ul a{
text-decoration: none;
color: white;
font-size: 40px;
text-align: center;
width: 20%;
display: block;
background: #607d8b;
padding: 8px 0;
float: left;
transition: 0.5s;
}
ul a:hover{
opacity: 0.8;
}
</style>
</head>
<body>
<ul>
<a href="#" style="background:#f19800;"><i class="ion-ios-home"></i></a>
<a href="#"><i class="ion-ios-folder"></i></a>
<a href="#"><i class="ion-heart"></i></a>
<a href="#"><i class="ion-gear-b"></i></a>
<a href="#"><i class="ion-search"></i></a>
</ul>
</body>
</html>