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.

I would like to have a pure css solution, but I can not come up with anything.

This is what a button looks like: 

<button type="submit" name="btnSave" id="btnSave" class="btn btn-primary"><i class="icon-save"></i> Save</button>

I would like to add that it could also be an: 

<a class="btn btn-warning"><i class="icon-trash"></i> Delete</a>

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.

I've tried text-ident, but that also hides the icon.

html css twitter-bootstrap
Edit
Report