Hoverable nav icons - html

Question

I am trying to do an icon navbar where on hover the icon also hovers the same colour, I have the icon sort of positioned but at the same time I can't push it to the right or it disappears.
The main goal is pretty much put the icon to the left of the a href with about 3px of padding of the right so it's not touched the text and on the nav menu hover the icon hovers the same colour as the text for each nav item.
HTML
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><div class="fa-icon-home"></div>HOME</li>
<li>ABOUT</li>
<li>DESIGNS</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
CSS:
.fa-icon-home {
background-image: url('../img/home.png');
background-repeat: no-repeat;
height: 22px;
position: relative;
top: 15px;
right: 10px;
}
.fixed-nav-bar {
position: fixed;
width: 100%;
background-color: #3f3f3f;
}
.fixed-nav-bar li, .fixed-nav-bar a {
line-height: 70px;
width: 100px;
max-width: 120px;
}
.menu {
width: 90%;
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.menu a, .menu a:visited {
color: #ffffff;
overflow: hidden;
font-size: 20px;
}
.menu a:hover, .menu a:target {
display: block;
color: #72BCD4;
}
.menu-items {
display: inline-block;
}
.menu-items li {
display: inline-block;
border-top: 2px solid transparent;
}
.menu-items a {
text-decoration: none;
display: block; /* New Line */
}
.menu-items li:hover {
border-top: 2px solid #72BCD4;
}
.show, .hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2;
}
.show {
background-image: url(../assets/down-arrow-icon.png);
}
.hide {
background-image: url(../assets/up-arrow-icon.png);
}

Answer 1

I changed the way the icon is applied, using a:before now.
.menu-items li {
position: relative;
}
.menu-items li:nth-child(1) a:before {
font-family: FontAwesome;
color: white;
content: "\f015";
position: absolute;
top: 0;
left: -.5em;
}
.fixed-nav-bar {
position: fixed;
width: 100%;
background-color: #3f3f3f;
}
.fixed-nav-bar li,
.fixed-nav-bar a {
line-height: 70px;
width: 100px;
max-width: 120px;
}
.menu {
width: 90%;
max-width: 960 px;
margin: 0 auto;
text-align: center;
}
.menu a,
.menu a:visited {
color: #ffffff;
overflow: hidden;
font-size: 20px;
}
.menu a:hover,
.menu a:target {
display: block;
color: #72BCD4;
}
.menu-items li {
display: inline-block;
border-top: 2px solid transparent;
}
.menu-items a {
text-decoration: none;
display: block;
}
.menu-items li:hover {
border-top: 2px solid #72BCD4;
}
.menu-items li:hover a:before {
color: #72BCD4;
}
.show,
.hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2;
}
.show {
background-image: url(../assets/down-arrow-icon.png);
}
.hide {
background-image: url(../assets/up-arrow-icon.png);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li>HOME</li>
<li>ABOUT</li>
<li>DESIGNS</li>
<li>CONTACT</li>
</ul>
</div>
</nav>

Answer 2

Here, changed a few CSS rules and here you go:
.fixed-nav-bar {
position: fixed;
width: 100%;
background-color: #3f3f3f;
}
.fixed-nav-bar li, .fixed-nav-bar a {
line-height: 70px;
width: 100px;
max-width: 120px;
}
.menu {
width: 90%;
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.menu a, .menu a:visited {
color: #ffffff;
overflow: hidden;
font-size: 20px;
}
.menu a:hover, .menu a:target {
display: block;
color: #72BCD4;
}
.fixed-nav-bar .fa-home:hover {
color: #72BCD4;
}
.menu-items {
display: inline-block;
}
.menu-items li {
display: inline-block;
border-top: 2px solid transparent;
}
.menu-items a {
text-decoration: none;
display: block; /* New Line */
}
.menu-items li:hover {
border-top: 2px solid #72BCD4;
}
.show, .hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2;
}
.show {
background-image: url(../assets/down-arrow-icon.png);
}
.hide {
background-image: url(../assets/up-arrow-icon.png);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><i class="fa fa-home" aria-hidden="true"></i> HOME</li>
<li>ABOUT</li>
<li>DESIGNS</li>
<li>CONTACT</li>
</ul>
</div>
</nav>