html - 试图将我的图标字体放在我的链接上方，以获得与我的图标图像相同的效果

Question

我正在使用菜单链接上方的图标(图像)制作菜单。

但现在我正在尝试使用“Font-Awesome”库中的图标字体而不是图标图像。

但我无法在我的链接上方获得图标字体，以产生与我的图像图标完全相同的效果。

如下图所示，在我的“新闻”和“注销”链接中，我使用我的主页图像作为链接上方的图标，而在我的“用户”链接中，我使用的图标字体不在我的链接上方。

你有没有看到一些方法可以像我对图标图像那样对图标字体产生同样的效果？

我所有的代码都在这里:http://jsfiddle.net/r58Ht/

这是我的 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>

我的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);
}

Answer 1

您可以绝对定位它，然后通过边距移动它。如下所示，我添加到您的 fiddle 中的以下 CSS 代码:

position:absolute; 
margin-top:-30px;

可以看出here