Nascondi testo del pulsante in modalità telefono - Bootstrap

Question

Sto creando un'applicazione in cui vorrei nascondere il testo del pulsante per risparmiare spazio prezioso nella "modalità telefono". Tutti i pulsanti hanno icone, quindi dovrebbe essere sufficiente.

Mi piacerebbe avere una soluzione di css pura, ma non riesco a trovare nulla.

Questo è ciò che un tasto appare come:

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

Vorrei aggiungere che potrebbe anche essere una:

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

Quindi fondamentalmente, se la modalità del reattivo è il telefono, tutti i il testo all'interno del selettore .btn deve essere nascosto. Ma l'icona deve rimanere.

Ho provato text-ident, ma anche questo nasconde l'icona.

Answer 1

Vorrei utilizzare la classe di bootstrap twitter incorporata .hidden-phone.

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

http://twitter.github.com/bootstrap/scaffolding.html#responsive

Answer 2

È questo quello che vuoi?

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

Assicurati di aver incluso bootstrap-responsive.css se non funziona.

Answer 3

In bootstrap 3 classe hidden-phone era changed a hidden-xs. Infatti, hidden- può ora essere utilizzato con altri prefissi dimensione del dispositivo, come lg, sm ecc ...