Currently, I am designing the topbar for my website using Foundation. Everything seems to be functioning correctly except for the menu icon not appearing. I have followed the documentation provided by Foundation, but I am still facing difficulties. Here is a snippet of what I have implemented:
<header class="contain-to-grid">
<!-- Starting the Top-Bar -->
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"/>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li >
<a href="#">page1</a>
</li>
<li class="divider"></li>
<li>
<a href="#">page2</a>
</li>
<li class="divider"></li>
<li >
<a href="#">page3</a>
</li>
<li class="divider"></li>
</ul>
<!--Search in top bar-->
<ul class="right">
<li class="has-form">
<div class="row collapse">
<div>
<div class="large-8 small-8 columns">
<input type="text" placeholder="">
</div>
<div class="large-4 small-4 columns">
<a href="#" class="button expand">Search</a>
</div>
</div>
</div>
</ul>
</section>
</nav>
<!-- End of Top-Bar -->
</header>
The text "Menu" shows up and functions properly, however, the menu icon is not displaying at all. If I remove "Menu," nothing is visible, and the menu becomes unusable.