物化设计汉堡图标不显示

Question

我在我的 rails 应用程序中使用 materialize 作为 UI 框架，除了 'material-icons' 'menu' 选项不能正常工作外，一切都正常工作。

完整的代码在下面，但这是不能正常工作的部分：

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

或者我应该坚持打高尔夫球。

Answer 1

要在 matralize 中使用图标，您必须包含此字体

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

根据他们的官方文档here