Nascondi testo, lascia elementi icona

Question

Ora ho un sito piuttosto grande e sarebbe necessario molto tempo per modificare i codici di tutti i pulsanti, quindi mi chiedo se il CSS possa fare qualcosa per me senza modificare il codice HTML .

Ogni pagina ha una barra delle azioni con alcuni pulsanti, che sono tutti costituiti da un'icona e un testo. Qualcosa di simile a questo:

<div class="action-bar"> 
    <a href="" class="btn btn-primary"> 
     <i class="fa fa-icon"></i> 
     Button label 
    </a> 
    <a href="" class="btn btn-primary"> 
     <i class="fa fa-icon"></i> 
     Button label 
    </a> 
</div> 

Quello che voglio ottenere ora, è che sui dispositivi mobili, il testo all'interno del pulsante non verrà visualizzato; solo l'icona dovrebbe essere visualizzata.

Se avessi un markup come questo:

<a href="" class="btn btn-primary"> 
    <i class="fa fa-icon"></i> 
    <span class="label">Button label</label> 
</a> 

Poi so che potrei nascondere tutte le etichette facendo:

@media(max-width:768px) { 
    .btn .label { 
     display: none; 
    } 
} 

Quindi quello che mi chiedo è, c'è un puro CSS equivalente a questo, ma con il primo markup HTML dove non c'è span.label?

Answer 1

è possibile impostare la dimensione del carattere a zero:.

.btn { font-size: 0; } 

Se le icone contengono testo, sovrascrivere la loro dimensione del carattere:

.fa { font-size: initial; } 

Answer 2

È possibile utilizzare:

@media(max-width:768px) { 
    .btn { 
     color: transparent; 

    } 
    .btn > .fa{ 
     color: black; //or color of your choice 
    } 
} 

In questo modo nascondere il testo, ma non affrontare la dimensione del pulsante.

Se si conosce la dimensione delle icone, è possibile forzare tale dimensione allo .btn s e quindi utilizzare position:absolute;top:0;left:0;z-index:1; sulle icone.

Answer 3

Supponendo che la larghezza delle icone è 1em, si può fare qualcosa di simile

/* just to make the icon visible */ 
 
.fa.fa-icon { 
 
    display:inline-block; 
 
    width:1em; height:1em; 
 
    background:orange; 
 
} 
 

 
a { 
 
    display:inline-block; 
 
    width: 1em; /* set to same as icon */ 
 
    color:white; /* set to same as background */ 
 
    overflow:hidden; 
 
}

<div class="action-bar"> 
 
    <a href="" class="btn btn-primary"> 
 
     <i class="fa fa-icon"></i> 
 
     Button label 
 
    </a> 
 
    <a href="" class="btn btn-primary"> 
 
     <i class="fa fa-icon"></i> 
 
     Button label 
 
    </a> 
 
</div>

(dove i quadrati arancioni sono le icone, non ho voglia di compresa la FontAwesome completa , così ho dovuto fingere un po ')