Html 具体化：列表中包含文本的图标

我正在用它来构建一个网页

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

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

家
家


面对
关于


收藏
画廊


电子邮件
接触

问题在于仅呈现图标，而不呈现文本：

我认为这是Materialize中

元素中的CSS属性。如果我也想显示文本，我需要做什么？

您需要添加一个

标记，如下所示：

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

我不知道您为什么看不到文本。正如我刚才复制粘贴您的代码，我可以看到文本和图标

家
家


面对
关于


收藏
画廊


电子邮件
接触

好的，我在

nav ul.waves effect I

中添加了

display:inline

，问题就解决了

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

---

文本颜色可能是黑色吗？CSS

字体大小：0

声明可能会影响导航栏，它通常用于消除导航列表元素周围意外的空白。将

字体大小设置为
可能会解决此问题。css代码肯定在做一些重要的事情。也提供css。你能贴一把小提琴吗？