html - 如何使用 Bootstrap 导航栏链接正确对齐 Font Awesome 图标？

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我们可以使用带有无序列表的图标，但是当我尝试使用 anchor 链接时 <a href=#">和 .nav class too 图标放置不正确。

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

Answer 1

这是我想出的。似乎fa-ul和 nav 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

希望对您有所帮助!