html - Foundation 5 - 顶部栏菜单图标不可见

Question

我正在使用最新版本的 Foundation 5 SASS(几天前从 https://github.com/zurb/bower-foundation 下载)开发一个网站。当我创建顶部栏时，菜单图标(3 条水平线)不会出现在移动/小屏幕上。这只是“菜单”文本。

这是我的代码:

<div class="contain-to-grid">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>

<section class="top-bar-section">
<ul class="left">
<li><a href="/">HOME</a></li>
<li class="has-dropdown">
<a href="#">ROOMS &amp; FACILITIES</a>
<ul class="dropdown">
<li><a href="#">FIRST</a></li>
<li><a href="#">SECOND</a></li>
<li><a href="#">THIRD</a></li>
</ul>
</li>
<li><a href="/">PRICES</a></li>
<li><a href="/">THINGS TO DO</a></li>
<li><a href="/">CONTACT</a></li>
</ul>

<ul class="right">
<li class="show-for-medium-up"><a href="http://foundation.zurb.com/docs" class="top-bar-availability"><i class="fi-calendar calendar-icon"></i> CHECK AVAILABILITY</a></li>
</ul>
</section>
</nav>
</div>

非常感谢任何帮助。我已经环顾四周，找不到解决方案。大多数问题似乎是由于人们省略了菜单文本周围的 span 标签。

谢谢

Answer 1

主要是有一个<span>元素。在下面的两个示例中，第一个不会显示汉堡包图标，但第二个和第三个会显示。

<li class="toggle-topbar menu-icon "><a href="#">Menu</a></li>
<li class="toggle-topbar menu-icon "><a href="#"><span>Menu</span></a></li>
<li class="toggle-topbar menu-icon "><a href="#"><span></span></a></li>