Question

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不合作。我从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

希望有所帮助！

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="#">List icons</a></li> <li><a href="#">List icons</a></li> <li><a href="#">List icons</a></li> <li><a href="#">List icons</a></li> </ul>

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

3 个答案: