如何使用Bootstrap Nav bar链接正确对齐字体真棒图标?

时间:2015-03-17 14:44:20

标签: html css twitter-bootstrap font-awesome

实例http://jsbin.com/wupume/1/edit

HTML

 <ul class="fa-ul nav nav-sidebar">
    <li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li>
  <li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li>
  <li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li>
  <li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li>
</ul>

根据this font-awesome example page,我们可以使用带有无序列表的图标,但是当我尝试使用锚链接<a href=#">.nav类时,图标放置也不合适。

我想知道在没有编写自定义css的情况下是否有任何方法可以正确对齐。

3 个答案:

答案 0 :(得分:1)

这是我想出的。似乎fa-ulnav nav-whatever不合作。我从fa-ul标记中删除了<ul>,并添加到nav nav-pills nav-stacked中以制作垂直列表。然后,我还从fa-li标记中删除了<a>,所有内容似乎都正确对齐:

<div class="container">
  <ul class="nav nav-pills nav-stacked">
  <li><a href="#"><i class="fa fa-check-square"></i> List icons</a></li>
  <li><a href="#"><i class="fa fa-check-square"></i> List icons</a></li>
  <li><a href="#"><i class="fa fa-check-square"></i> List icons</a></li>
  <li><a href="#"><i class="fa fa-check-square"></i> List icons</a></li>
  </ul>
</div>

和Bootply:

Bootply - Nav with FA Icons

希望有所帮助!

答案 1 :(得分:0)

更简单的解决方案是使用fixed widthfa-fw而不是fa-ulfa-li

因此HTML标记将成为:

<ul class="nav nav-sidebar">
  <li><a href="#"><i class="fa-fw fa fa-check-square"></i>List icons</a></li>
  <li><a href="#"><i class="fa-fw fa fa-check-square"></i>List icons</a></li>
  <li><a href="#"><i class="fa-fw fa fa-check-square"></i>List icons</a></li>
  <li><a href="#"><i class="fa-fw fa fa-check-square"></i>List icons</a></li>
</ul>

实例:jsbin

答案 2 :(得分:-1)

删除导航

<ul class="fa-ul nav-sidebar"> <li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li> <li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li> <li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li> <li><a href="#"><i class="fa-li fa fa-check-square"></i>List icons</a></li> </ul>