Abstand zwischen Glyphon und Text?

Question

Ich versuche, ein Glyphensymbol als Teil einer E-Mail-Adresse Link hinzuzufügen. Das Symbol zeigt an, dass zwischen dem Symbol und dem E-Mail-Adresse-Text kein Abstand vorhanden ist (der Hyperlink soll sowohl das Symbol als auch den Text enthalten, einschließlich Leerzeichen). Was ist der beste Weg, dies zu erreichen?

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

Answer 1

Sie können versuchen, dies zu tun:

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

bewusst sein, dass Ihre benutzerdefinierte CSS-Datei sollte

Answer 2

nach bootstrap.css aufgenommen werden, wenn glyphicon mit nur ein Leerzeichen nach </span> Tag wie unter

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

Wenn Sieverwendenzusammen mit font awesome Bibliotheksreferenz einfach fa-fw am Ende der Klasse hinzufügen.

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

Answer 3

Nach Bootstrap:

Icon Klassen nur auf Elemente verwendet werden soll, die keinen Text beinhalten und> haben keine untergeordneten Elemente.

sollten Sie die Adresse E-Mail setzen außerhalb der Spanne:

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

Answer 4

Von http://getbootstrap.com/components/ finden Sie diese Notiz

Seien Sie sicher, einen Raum zwischen dem Symbol und Text für die richtige Polsterung zu verlassen.

So können Sie die CSS, wenn gewünscht, zum Beispiel unter Verwendung von Bogdan Idee, ändern oder nur durch   zwischen dem Symbol und Ihrem Text hinzufügen:

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