菜单“汉堡”图标不会出现，但会出现文本

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。