css – 物化设计汉堡包图标不显示

我在rails应用程序中使用materialize作为UI框架,除了’material-icons”菜单’选项无法正常工作外,一切正常.

完整的代码在下面,但这是不合适的部分：

<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>

当我缩小浏览器以触发响应时,它不会变成汉堡包图标,而只是显示文本节点“菜单”.我无法弄清楚我做错了什么.其他一切都在发挥作用.

这是整个导航/下拉结构：

<!-- Dropdown Structure -->
  <ul id="dropdown1" class="dropdown-content">
    <li><a href="#!">My Profile</a></li>
    <li><a href="#!">My Courses</a></li>
    <li class="divider"></li>
    <li><a href="#!">logout</a></li>
  </ul>

  <!-- Dropdown Structure -->
  <ul id="dropdown2" class="dropdown-content">
    <li><a href="#!">My Profile</a></li>
    <li><a href="#!">My Courses</a></li>
    <li class="divider"></li>
    <li><a href="#!">logout</a></li>
  </ul>

  <header>
    <nav class="z-depth-2">
      <div class="container">
        <div class="nav-wrapper">
          <a href="#!" class="brand-logo">OppSim</a>
          <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
          <ul class="right hide-on-med-and-down">
          <!-- web view -->
            <li><a href="#">Courses</a></li>
            <li><a href="#">Signup</a></li>
            <li><a href="#">Login</a></li>
            <!-- Dropdown Trigger -->
            <li><a class="dropdown-button" href="#!" data-activates="dropdown1">JTB<i class="material-icons right"></i></a></li>
          </ul>
          <ul class="side-nav" id="mobile-demo">
          <!-- mobile view -->
            <li><a href="#">Courses</a></li>
            <li><a href="#">Signup</a></li>
            <li><a href="#">Login</a></li>
            <!-- Dropdown Trigger -->
            <li><a class="dropdown-button" href="#!" data-activates="dropdown2">JTB<i class="material-icons right"></i></a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

或许我应该坚持打高尔夫球.

解决方法

要在materalize中使用图标,您必须包含此字体

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

根据他们的官方文件here