Question

我在我的rails应用程序中使用materialize作为UI框架，除了＆＃39; material-icons＆＃39;之外，一切正常。＆＃39;菜单＆＃39;选项不能正常工作。

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

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

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

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

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

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

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

根据其官方文档here

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

1 个答案: