Question

我正在使用Materialize来构建网页。

我想放一个菜单，其中每个元素都有一个带有相关文字的图标：

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

问题是只呈现图标而不是文本：

我想这是针对Materialise中<li>元素中的CSS属性。如果我想要显示文本，我还需要做什么？

Answer 1

您需要添加<span>标记，如下所示：

<li class="waves-effect col s3">
    <i class="material-icons">home</i> <!-- Icon-->
    <span>Home</span>                  <!-- Text-->
</li>

Answer 2

我不知道为什么你看不到文字。因为我刚刚复制粘贴了你的代码，我可以看到文字和图标。

＆＃13;

	 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<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>

＆＃13;

Answer 3

Okey，我在display: inline中添加了nav ul .waves-effect i，问题就解决了！

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

实现：列表中包含文本的图标

3 个答案: