如何在移动端使MaterializeCSS按钮仅显示图标隐藏文字？

To hide the "Contact support" text on mobile screens while keeping the face icon visible, you have two straightforward options using MaterializeCSS's features:

Option 1: Use Materialize's Built-in Responsive Helper Class (Easiest) #

Materialize includes a helper class show-on-medium-and-up that makes elements visible only on medium (601px+) and larger screens. Wrap your button text in a span with this class, and it will automatically hide on small mobile screens:

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

This works out of the box because Materialize's default breakpoint for small screens is ≤600px, so the span will be hidden below that width—leaving only the icon visible to save space.

Option 2: Custom CSS Media Query (For Breakpoint Control) #

If you want to adjust the breakpoint (e.g., hide the text below 768px instead of 600px), use a custom media query. First, wrap the text in a span with a custom class:

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

Then add this CSS to your stylesheet:

/* Hide button text on screens smaller than 768px */
@media only screen and (max-width: 767px) {
  .button-text {
    display: none;
  }
}

You can tweak the max-width value to match your desired mobile breakpoint.

Quick Notes: #

• Wrapping the text in a span is critical here—it lets us target only the text content without hiding the icon.
• The !important flag isn't needed in the custom CSS unless you have conflicting styles overriding the display property.

内容的提问来源于stack exchange，提问作者frankwolffnl