<link rel="stylesheet" href="https://cdn.staticfile.org/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>

body {margin:0;}

​

.icon-bar {

    width: 100%;

    background-color: #555;

    overflow: auto;

}

​

.icon-bar a {

    float: left;

    width: 20%;

    text-align: center;

    padding: 12px 0;

    transition: all 0.3s ease;

    color: white;

    font-size: 36px;

}

​

.icon-bar a:hover {

    background-color: #000;

}

​

.active {

    background-color: #4CAF50 !important;

}