I am currently working on a menu design that incorporates icons (images) above my menu links.
However, I have decided to switch from using icon images to utilizing icon-fonts from the 'Font-Awesome' library.
Despite this change, I am struggling to achieve the same effect with icon-fonts as I had with my image icons placed above the links.
For instance, in the example below, I have used my home image as an icon above the "NEWS" and "LOGOUT" links, while for the "USERS" link, I attempted to use an icon font which is not positioned above the link.
Is there any way to achieve the same visual effect with icon fonts as I did with icon images?
Here is the code snippet:
This is my html:
<div id="header">
<div class="content">
<ul class="menu">
<li class="li"><a href="#" class="home">Home</a></li>
<li class="li"><a href="#" class="post">News</a></li>
<li class="li"><a href="#" class="user"><i style="font-size:2em; color:#fff;" class="fa fa-home"></i>Users</a></li>
<li class="li"><a href="#" class="exit">Logout</a></li>
</ul>
</div>
</div>
My css:
body{background:#ccc;}
#header .content .menu{
list-style:none;
display:inline;
margin:10px auto;
}
#header .content .menu .li
{
float:left;
position:relative;
}
#header .content .menu .li a
{
float:left;
display:block;
width:74px;
text-align:center;
font-size:14px;
padding:40px 15px 10px 15px;
text-transform:uppercase;
text-decoration:none;
color:#FFF;
}
#header .content .menu .li .home{
background:url(http://i.imgur.com/7UA7WYr.png) top 10px center no-repeat;
}
#header .content .menu .li .post{
background:url(http://i.imgur.com/7UA7WYr.png) top 10px center no-repeat;
}
/*#header .content .menu .li .user{
background:url(http://i.imgur.com/7UA7WYr.png) top 10px center no-repeat;
}*/
#header .content .menu .li .exit{
background:url(http://i.imgur.com/7UA7WYr.png) top 10px center no-repeat;
}
#header .content .menu .li:hover{
background-color:rgba(0,103,105,0.5);
}