CSS:

#header nav > ul > li a.icon:before {
color: #fff;
float: right;
margin-left: 0.3em;
}

#header nav > ul > li a:hover {
color: #ED1C24 !important;
}

#header nav > ul > li a.icon:hover:before,
#header nav > ul > li a.icon.active:before {
color: #ED1C24;
}

HTML:

<!– Header –>
<header id=”header”>
<a href=”index.html”><img src=”images/logo-red-text.png” height=”17″></a>
<nav>
<ul>
<li><a href=”#footer” class=”icon fa-info-circle”>About</a></li>
<li><a href=”#footer2″ class=”icon fa-heart”>Services</a></li>
</ul>

</nav>
</header>