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

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>

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

---

编辑(12 月 9 日):

这是一个没有 Font Awesome 图标的 fiddle :

http://jsfiddle.net/S5q7z/

还有:

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

Answer 1

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

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

选项 1 - 定制/完善:

简单看一下代码，从你的 attempts 中可以清楚地看出foundation 和 font-awesome 并没有达到你想要的水平；可能是因为 div、下拉菜单和 li 元素(以及其他元素)分别由 foundation 和 font-awesome 处理的方式存在冲突。

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

选项 2 - 适应:

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

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

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

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

• 实现时间的一小部分(它将)
• 主要跨浏览器和设备工作(我在各种宽度下进行了简短测试，但并不全面)
• 满足项目的视觉/用户体验需求
• 具有成本效益

然后您必须考虑时间、成本和值(value)方法。

当然，从个人角度来看，如果您愿意让它更兼容并可供更广泛的社区使用，您可以创建一个新的 font-awesome-zerb 版本，但是就您的问题而言，这可能超出了此处的范围，实际上您有时间可以解决该主题。