带有 Font-Awesome 导航栏图标的 Foundation 5答案

【问题标题】：Foundation 5 with Font-Awesome navbar icons带有 Font-Awesome 导航栏图标的 Foundation 5
【发布时间】：2014-04-01 21:16:49
【问题描述】：

我正在尝试使用 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>

但如果可能的话，我想用 Right Way™ 来做。

已编辑（12 月 9 日）：

以下是没有 Font Awesome 图标时的外观：

http://jsfiddle.net/S5q7z/

还有：

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

【问题讨论】：

看不到你的图片...你能提供一个jsfiddle吗？这样我们就可以直观地看到您想要实现的目标。
糟糕... Droplr 链接是d.pr/i/lmpV。我一会儿也会做一个小提琴。

标签： list zurb-foundation navbar font-awesome

【解决方案1】：

Font-awesome (latest version) 旨在与 bootstrap 相吻合，它确实如此，但它并没有那么容易地与基础相吻合，也没有达到您所寻求的水平。

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

选项 1 - 定制/完善：

简单地看一下代码，从您的attempts 中可以清楚地看出，基础和 font-awesome 并没有达到您想要的水平；可能是因为div、下拉菜单和li 元素（以及其他元素）分别被基础和字体真棒处理的方式存在冲突。

您可以花时间调试这些兼容性，但可能需要相当长的时间来自定义两者，以便以您希望的方式协同工作。

选项 2 - 适应：

这似乎不是您要寻求的解决方案，但您引用的基本方法有效：

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

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

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

实施时间的一小部分（它将）
主要跨浏览器和设备工作（我在各种宽度下进行了简要测试，但不全面）
满足项目的视觉/UX 需求
性价比高

然后您必须考虑时间与成本与价值的方法。

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

【讨论】：

在等待 SO 答案时，我最终选择了选项 2。我认为您是对的：从长远来看，实施起来会更快/更便宜/更安全。谢谢！

【解决方案2】：

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

【讨论】：