<nav class="nav-primary">
  <ul class="menu">
    <li class="menu-item home"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">Blog</a></li>
    <li class="menu-item"><a href="#">Contact</a></li>
    <li class="menu-item"><a href="#">About Us</a></li>
  </ul>
</nav>

.nav-primary {
  background: #CCC;
}

.nav-primary li {
  list-style-type: none;
  display: inline-block;
  text-align: left;
  font-size: 26px;
  line-height: 0px;
}

.nav-primary a {
  display: inline-block;
  padding: 32px 20px;
  border: 1px dashed black; /* border only used for display purpose of alignment*/
  margin-right: -4px;
}

.nav-primary a:hover {
    background: #FFF;
}

.menu {
  width: 100%;
}

.menu-item {

}

.home a {
  font-size:0px;
}

.home a:after {
  font-family: "dashicons";
  content: " f102";
  font-size: 40px;
  display: inline-block;
  vertical-align: middle;
  line-height: 0px;
}