<nav class="menu">
  <ul class="menu-list">
    <li class="menu-item"><a href="#" class="fa fa-home active"></a></li>
    <li class="menu-item"><a href="#" class="fa fa-codepen"></a></li>
    <li class="menu-item"><a href="#" class="fa fa-git"></a></li>
    <li class="menu-item"><a href="#" class="fa fa-css3"></a></li>
    <li class="menu-item"><a href="#" class="fa fa-html5"></a></li>
  </ul>
</nav>
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu {
  display: inline-block;
}
.menu-list {
  background-color: #111F4D;
  display: flex;
}
.menu-item {
  font-size: 2.5rem;
  & a {
    color: #F2F4F7;
    padding: 2rem;
    border-bottom: .2rem solid transparent;
    transition: border .2s ease;
    &:hover {
      border-color: #E43A19;
    }
  }
}
.active {
  background-color: #E43A19;
}
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
  2. https://codepen.io/diana_aceves/pen/4985644cf5dbc85b55686ffa7bb43029.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.