メニュー "ハンバーガー"アイコンが表示されませんが、テキストが表示されます

Question

財団を使って私のウェブサイトのトップバーに取り組んでいます、すべてがうまく機能しているようですメニューアイコンが表示されないように、財団のドキュメントはまだ問題を抱えています。私がこのようなもののように見えたもの：

<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

私は解決策を知っていると思います。あなたは財団からCSSをインポートしなければなりません：

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

.

Foundationメディアクエリを使用します。つまり、ブラウザウィンドウの電流を40.063emにサイズ変更する必要があります。