基础 - 菜单图标看起来与文档不同?

时间:2016-12-07 14:30:36

标签: html css zurb-foundation

为什么下面的菜单图标与基础doc sit e?

不同

enter image description here

这是doc:

中的正确图标

enter image description here

我的代码:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation.css" />
    <link rel="stylesheet" href="node_modules/foundation-icon-fonts/foundation-icons.css" />
  </head>

  <body>

    <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle></button>
      <div class="title-bar-title">Menu</div>
    </div>

    <div class="top-bar" id="example-menu">
      <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menu-text">Site Title</li>
          <li>
            <a href="#">One</a>
            <ul class="menu vertical">
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <li><input type="search" placeholder="Search"></li>
          <li><button type="button" class="button">Search</button></li>
        </ul>
      </div>
    </div>

    <h1>Hello, world!</h1>

    <i class="fi-social-twitter"></i>

    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/foundation-sites/dist/js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>

有什么想法吗?这是一个错误吗?

0 个答案:

没有答案