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

我正在做一个菜单使用图标（图像）以上我的菜单链接

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

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

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

你有没有看到一些方法可以像Im使用图标图像一样，对图标字体产生同样的效果

我这里有我所有的代码：

这是我的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代码添加到您的小提琴中：

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

---

可以看到

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

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

---

可以看到

您只需将

图标设置为

显示：块


您只需将
内的图标设置为
显示：块


只需在图标和标签之间划一条线

<a href="#" class="user"><i style="font-size:2em; color:#fff;" class="fa fa-home"></i>
<br />
Users</a>



只需在图标和标签之间划一条线

<a href="#" class="user"><i style="font-size:2em; color:#fff;" class="fa fa-home"></i>
<br />
Users</a>