Question

我有一个使用font-awesome图标的堆叠引导导航栏。我想将图标放在每个导航栏链接上方而不是左侧。我找到了一个wordpress主题，它完成了我想要完成的任务，并在此处包含一个链接：

这是我目前所拥有的代码，非常直接的自举堆叠导航。

<section class="row-fluid">
    <nav class="span2">
        <ul class="side-nav nav nav-pills nav-stacked">
          <li><a href="#"><i class="icon-large icon-home"></i> Dashboard</a></li>
          <li><a href="#"><i class="icon-large icon-key"></i> Licenses</a></li>
          <li><a href="#"><i class="icon-large icon-download-alt"></i> Downloads</a></li> 
          <li><a href="#"><i class="icon-large icon-question-sign"></i> Get help</a></li>
        </ul>
    </nav>

Answer 1

这取决于您是否希望将药片堆叠在一起或放在一起。您可以在此working JSFiddle中看到这两个选项。

堆叠HTML：

<section class="row-fluid">
    <nav class="span2">
        <ul class="side-nav nav nav-pills nav-stacked">
            <li><a href="#"><i class="icon-large icon-home"></i><br> <div class="wrd">Dashboard</div></a></li>
          <li><a href="#"><i class="icon-large icon-key"></i><br> <div class="wrd">Licenses</div></a></li>
          <li><a href="#"><i class="icon-large icon-download-alt"></i><br> <div class="wrd">Downloads</div></a></li> 
          <li><a href="#"><i class="icon-large icon-question-sign"></i><br> <div class="wrd">Get help</div></a></li>
        </ul>
    </nav>
</section>

<强>侧由端：

<section class="row-fluid">
    <nav class="span2">
        <ul class="nav nav-pills">
            <li><a href="#"><i class="icon-large icon-home"></i><br> <div class="wrd">Dashboard</div></a></li>
          <li><a href="#"><i class="icon-large icon-key"></i><br> <div class="wrd">Licenses</div></a></li>
          <li><a href="#"><i class="icon-large icon-download-alt"></i><br> <div class="wrd">Downloads</div></a></li> 
          <li><a href="#"><i class="icon-large icon-question-sign"></i><br> <div class="wrd">Get help</div></a></li>
        </ul>
    </nav>
</section>

基本上，您只需覆盖一个或两个默认的 CSS规则：

li {
    text-align: center;
}
.icon-large {
    font-size: 14pt;
}
.wrd {
    padding-top: 5px !important;
}

位置导航栏链接上方的字体 - 真棒图标

1 个答案: