Search code examples
htmlcssmaterialize

Materialize: icons with text in a list

I'm using Materialize to structure a webpage.

I want to put a menu where each element have an icon with related text:

<nav>
    <ul class="center-align row">
          <li class="waves-effect col s3">
              <i class="material-icons">home</i> <!-- Icon-->
              HOME                               <!-- Text-->
          </li>

          <li class="waves-effect col s3">
              <i class="material-icons">face</i>
              ABOUT
          </li>
          <li class="waves-effect col s3">
              <i class="material-icons">collections</i>
              GALLERIES
          </li>
          <li class="waves-effect col s3">
              <i class="material-icons">email</i>
              CONTACT
          </li>
      </ul>
  </nav>

The problem is that only the icon is rendered and not the text:

Nav menu

I imagine that this is for a CSS property in the <li> element in Materialize. What do I need to do if I want to show the text as well?

Solution

  • Okey, I added display: inline in nav ul .waves-effect i and the problem was solved!

     nav ul .waves-effect i {
    display: inline;
}