html - 菜单 "Hamburger"图标不会出现，但文本会出现

Question

我正在使用 foundation 在我的网站的顶部栏上工作，除了没有出现菜单图标外，一切似乎都运行良好，我遵循了 foundation 文档，但我仍然遇到问题。我所拥有的看起来像这样:

<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>

“菜单”确实出现并正常工作，但菜单图标从来没有出现过。如果我删除“菜单”，则什么也不会出现，我根本无法使用菜单。

Answer 1

我想我知道解决方案。您必须从 Foundation 导入 CSS，如下所示:

<link rel="stylesheet" type="text/css" href="css/foundation.min.css">

基金会使用媒体查询。这意味着您必须将当前浏览器窗口的大小调整为 40.063em。