基础5与Font-Awesome导航栏图标

Question

我正在尝试使用Font-Awesome的list icons在我的导航栏中构建图标。这是我的代码：

<section class="top-bar-section">
  <ul class="right fa-ul">
    <li class="fa-li fa fa-cog"><a href="#">Settings</a></li>
    <li class="has-dropdown fa-li fa fa-user">
      <a href="#">User</a>
      <ul class="dropdown fa-ul">
        <li class="fa-li fa fa-sign-out"><a href="#>Sign out</a></li>
      </ul>
    </li>
  </ul>
</section>

这看起来非常糟糕：

任何想法，如果这些东西可以很好地协同工作？我知道我可以将图标添加到我的链接中，如：

<li><a href="#"><i class="fa fa-cog"></i> Settings</a></li>

但如果可能的话，我想做正确的方法。

---

已编辑（09年12月）：

如果没有Font Awesome图标，这是一个小提示：

http://jsfiddle.net/S5q7z/

并且：

http://jsfiddle.net/S5q7z/1/

Answer 1

Font-awesome（latest version）旨在与引导程序相吻合，但它与基础不相容，而不是在你所寻求的水平上。

你有几个选择，这取决于 你愿意追求“Right Way™”多远 ...

选项1 - 自定义/完美：

简要地看一下代码，从你的attempts可以清楚地看出，基础和字体很棒，并没有在你想要的水平上混合;可能因为div中存在冲突，下拉和li元素（以及其他元素）分别由基础和字体处理。

你可以花时间调试这些兼容性，但它可能需要相当长的时间来定制两者，以便以一致的方式和你希望的方式相互协作。

选项2 - 适应：

这不是你似乎寻求的解决方案，而是你引用的基本方法：

<li><a href="#"><i class="fa fa-cog"></i> Settings</a></li>

在这里演示它：http://jsfiddle.net/g6t44/

从功能和交付的角度来看，如果此方法有效并且需要：

• 实施的一小部分时间（将会）
• 主要是跨浏览器和设备（我在各种宽度上进行了短暂测试，但不是全面测试）
• 满足项目的视觉/用户体验需求
• 具有成本效益

然后你必须考虑时间与成本与价值的关系。

当然，从个人的角度来看，如果你愿意让它更兼容并且可供更广泛的社区使用，你可以分叉zerb并创建一个新的font-awesome-zerb版本，但这可能超出了这里有关于你的问题的范围，以及你可以用来解决这个问题的时间。

Answer 2

Fontawesome github新闻称，他们将像bootstrap一样支持基础。检查链接可能会有所帮助。并且有人使用它。 https://github.com/FortAwesome/Font-Awesome/issues/1212