title: Hide text, leave icon elements
body: <p>I have a pretty big site now, and it would be time-consuming to change the codes of all of the buttons, so I am wondering if CSS could do something for me with no HTML code change. </p>
  
  <p>Every page has an action bar with some buttons, which all consist of an icon and text. Something like this:</p>
  
  <pre><code>&lt;div class="action-bar"&gt;
      &lt;a href="" class="btn btn-primary"&gt;
          &lt;i class="fa fa-icon"&gt;&lt;/i&gt; 
          Button label
      &lt;/a&gt;
      &lt;a href="" class="btn btn-primary"&gt;
          &lt;i class="fa fa-icon"&gt;&lt;/i&gt; 
          Button label
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to achieve now, is that on the mobile devices, the text inside the button will not display; only the icon should display. </p>
  
  <p>If I had a markup like this one:</p>
  
  <pre><code>&lt;a href="" class="btn btn-primary"&gt;
      &lt;i class="fa fa-icon"&gt;&lt;/i&gt; 
      &lt;span class="label"&gt;Button label&lt;/label&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Then I know I could hide all the labels by doing:</p>
  
  <pre><code>@media(max-width:768px) {
      .btn .label {
           display: none;
      }
  }
  </code></pre>
  
  <p>So what I'm wondering is, is there a pure CSS equivalent to this, but with the first HTML markup where there is no <code>span.label</code>? </p>