title: Hide button text in phone mode - Bootstrap
body: <p>I am making an application in which I would like to hide the button text in order to save valuable space in the "phone mode". All the buttons have icons, so that should be enough.</p>
  
  <p>I would like to have a pure css solution, but I can not come up with anything.</p>
  
  <p>This is what a button looks like: </p>
  
  <pre><code>&lt;button type="submit" name="btnSave" id="btnSave" class="btn btn-primary"&gt;&lt;i class="icon-save"&gt;&lt;/i&gt; Save&lt;/button&gt;
  </code></pre>
  
  <p>I would like to add that it could also be an: </p>
  
  <pre><code>&lt;a class="btn btn-warning"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt; Delete&lt;/a&gt;
  </code></pre>
  
  <p>So basicly, if the responsive's mode is phone, all the text inside the .btn selector should be hidden. But the icon needs to remain.</p>
  
  <p>I've tried <code>text-ident</code>, but that also hides the icon.</p>