adamscott adamscott - 4 months ago 40
CSS Question

Materialize Design Hamburger Icon Not Displaying

I'm using materialize as a UI framework in my rails app, and everything is working correctly except the 'material-icons' 'menu' option isn't working properly.

The full code is further below, but this is the piece that is not working appropriately:

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


Instead of turning into a hamburger icon, when I shrink the browser to trigger the responsiveness, it just displays the text node 'menu'. I can't figure out what I am doing wrong. Everything else is working.

This is the entire nav/dropdown structure:

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

To use icons in materalize you have to include this font

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

as per their official documentation here

Comments