Spaziatura tra il glyphicon e il testo?

Question

Sto tentando di aggiungere un'icona di glifo come parte di un collegamento di indirizzo di posta elettronica. L'icona mostra ma non c'è spazio tra l'icona e il testo dell'indirizzo e-mail (voglio che il collegamento ipertestuale includa sia l'icona che il testo ... compreso lo spazio). Qual è il modo migliore per realizzare questo?

 <a href="mailto:someone@somewheredotcom" title="Some Email"> 
     <span class="glyphicon glyphicon-envelope">someone@somewheredotcom</span> 
    </a> 

Answer 1

Si può provare a fare questo:

.glyphicon-envelope:before { 
    margin-right: 5px; 
} 

essere consapevoli del fatto che il file CSS personalizzato dovrebbero essere inclusi dopo bootstrap.css

Answer 2

Se si utilizza glyphicon basta aggiungere uno spazio dopo </span> tag come sotto

<a href="#" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Individual</a> 

Se si utilizza glyphicon insieme al riferimento alla libreria font awesome basta aggiungere fa-fw alla fine della lezione.

<a href="mailto:someone@somewheredotcom" title="Some Email"> 
    <span class="glyphicon glyphicon-envelope fa-fw">someone@somewheredotcom</span> 
</a> 

Answer 3

Secondo Bootstrap:

classi icona dovrebbe essere utilizzato solo su elementi che non contengono contenuti del testo e> non hanno elementi figlio.

Si dovrebbe mettere l'indirizzo di posta elettronica al di fuori della portata:

<span class="glyphicon glyphicon-envelope fa-fw"></span>someone@somewheredotcom 

Answer 4

Da http://getbootstrap.com/components/, vedere questa nota

Assicurarsi di lasciare uno spazio tra l'icona e il testo per una corretta imbottitura.

Quindi, è possibile modificare il CSS se lo si desidera, ad esempio utilizzando l'idea di Bogdan, o semplicemente aggiungendo   tra l'icona e il testo:

<a href="mailto:someone@somewheredotcom" title="Some Email"> 
    <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>&nbsp;someone@somewheredotcom 
</a>