Question

我正在使用菜单链接上方的图标（图像）进行菜单。

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

但我无法获得链接上方的图标字体，与我的图片图标具有完全相同的效果。

如下图所示，在我的“NEWS”和“LOGOUT”链接中，我使用我的家庭图像作为链接上方的图标，并在我的“USERS”链接中使用我的图标字体，而不是链接。< / p>

你是否看到某些方法可以使用图标字体获得相同的效果，例如我有图标图像？

enter image description here

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

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

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

可以看到here

Answer 2

您可以将<i>内部的图标设置为display: block;

http://jsfiddle.net/r58Ht/3/

#header .content .menu .li i { display: block; }

Answer 3

只需在图标和标签

之间添加换行符即可

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

http://jsfiddle.net/r58Ht/5/

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

3 个答案: