如何使用 Bootstrap 导航栏链接正确对齐字体真棒图标？

Question

现场示例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 的情况下进行正确对齐。

Answer 1

这就是我想出的。看来fa-ul和nav nav-whatever不合作。我从 <ul> 标记中删除了 fa-ul 并添加到 nav nav-pills nav-stacked 以制作垂直列表。然后，我还从<a> 标签中删除了fa-li，一切似乎都正确对齐：

<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

希望有帮助！

Answer 2

更简单的解决方案是使用fixed width 类fa-fw 而不是fa-ul 和fa-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

Answer 3

删除导航

<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>