只有在响应模式下,按钮才显示图标。(html/css/materialize)

<a class="waves-effect waves-light white-text top-button z-depth-2">
   <i class="material-icons left">
      face
   </i>
     <span class="hide-on-small-only"> Contact support </span>
</a>

您需要从materialize中添加带有hide on small only类的span标记,以仅在mobile上隐藏按钮文本。

试试这个

使用 media query 像这样移动。

@media only screen and (max-width: 767px) {
  .top-button {
    font-size: 0;
  }
  .top-button i {
    font-size: 16px;
  }
}

这是工作代码

.top-button {
  font-size: 16px;
}

@media only screen and (max-width: 767px) {
  .top-button {
    font-size: 0;
  }
  .top-button i {
    font-size: 16px;
  }
}

<a class="waves-effect waves-light white-text top-button z-depth-2"><i class="material-icons left">face</i>Contact support</a>