如何在菜单项中使用字体真棒图标

Question

我需要在菜单中使用font awesome图标...一行中的菜单图标和菜单名称的下一行将会显示该菜单的背景图像。

附加我需要的图像是：

HTML代码：

<div class="menu">
                        <ul>
                            <li > <span class="fa fa-camera-retro"></span><br/>  <a href="#">Home</a> </li>
                            <li >  <a href="#"> Rule </a> </li>
                            <li > <a href="#"> Lookup </a> </li>
                            <li > <a href="#"> Search </a> </li>
                            <li >  <a href="#"> Publish </a> </li>
                            <li > <a href="#"> Package </a> </li>
                            <li > <a href="#">Help</a>  </li>
                        </ul>


            </div>

CSS是：

    .menu
{
    width:100%;
    position:absolute;
    left:180px;
    margin:30px 0 0 0;
    background:#00569D;
    min-height:40px;
    z-index:0;

}
.menu ul
{
padding:10px 0;
    display: inline;
    list-style:none;
    width:100%;
    margin:0;
}
.menu ul li
{
    display: inline;
    list-style:none;
    padding:13px 15px;
    min-height:40px;
    line-height:40px;
    -ms-transform: skew(-15deg, 0deg);
        -webkit-transform: skew(-15deg, 0deg);
        -moz-transform: skew(-15deg, 0deg);
        -o-transform: skew(-15deg, 0deg);
        transform: skew(-15deg, 0deg);
        background: url("mainNavItem-BG.png") no-repeat;
        background-position: right -1px;
    border-right: 1px solid #0068bc;

}
.menu ul li:hover
    {
    text-decoration:none;
    color: #ffffff;
    text-shadow: 1px 1px #00264e;
    background: url("mainNavHover-BG.png") repeat-x;
    }

.menu ul li span
    {

    color: #ffffff;
    line-height:0px !important;
    padding:0;
    margin:0;
    width:20px;
    }
.menu ul li a
    {
        text-decoration:none;
        color: #ffffff;
        text-shadow: 1px 1px #00264e;
    }
.menu ul li a:hover, .menu ul li a:current
    {
        text-decoration:none;
        color: #ffffff;
        text-shadow: 1px 1px #00264e;
        background:#000;
    }

我得到的最终结果是：

提前谢谢。

Srijith

Answer 1

您可以使用较小样式代码的图标完成导航。代码：

.nav {
  list-style: none;
  padding-left: 0;
}
.nav > li {
  float: left;
}
.nav > li > a {
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

示例是here