Question: I'm building a site with Bootstrap, and I have a vertical menu consisting of buttons that have a FontAwesome icon and text. For XS-screens, I don't want the menu to collapse completely, but I want the text to disappear and the button shrink to the size of the icon (which should NOT disappear). How can I get it to do that??

Answer: 
This is nice and simple with Bootstrap 3, and has already been mentioned by Christina and cvrebert.

Simply use the `hidden-xs` class with the buttons text as in this [fiddle](http://jsfiddle.net/jeremybrooks321/uufzrjm1/), and the example html below...

```
<button type="button" class="btn btn-default" aria-label="Left Align">
    <label class="hidden-xs">text</label>
    <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

```

I have put the button text in a label, but you could just as easily use a div, span, etc.

Oh and I have not bothered using the font awesome glyphs but this will work just as easily with them as well.
Something along these lines should work:

```
button *:not(i.fa) {
   font-size: 0;
}

```

Now, the `*` selector in CSS is extremely inefficient, so replace that with whatever other elements regularly occur in your button (there aren't a whole lot that are valid in there, so it shouldn't be difficult). Basically, the CSS is telling your page to render every element that's a child of a button to have a `font-size` of nil - unless it's a FontAwesome icon.

Hope that helps!