Wie vermeiden Sie zusätzlichen Platz bei der Verwendung von Glyphon mit Text?

Question

Ich habe ein Div mit Text in div.But das seltsame Verhalten auftritt, wenn Glyphicon hinzugefügt wird, das ist der Abstand zwischen den Wörtern ist mehr geworden.

Wie vermeide ich das?

<div class="glyphicon glyphicon-chevron-up">With glyphicon</div> 
<div>Without glyphicon</div> 

Demo of the issue

Demo of Implementation in my application

Answer 1

Dieses funktioniert ...

<div class="glyphicon glyphicon-chevron-up"></div>With glyphicon 
<div>Without glyphicon</div> 

Wenn Sie diese nicht verwenden Sie dann verwenden diese:

<div class="glyphicon glyphicon-chevron-up" style="color: steelblue;font-size: initial;" data-toggle="collapse" href="#new"></div><span style="color: steelblue;font-size: initial;" href="#new"> 
Glyhicon div with collapse</span> 
<div class="collapse in" id="new"> 
Something goes here 
</div> 

Dann nur Sie Option auf das Symbol klicken müssen zu wechseln.

Answer 2

glyphicon Klasse wendet die font-family : 'Glyphicons Halflings' in der das Symbol wiedergegeben werden kann. Aber Sie haben Ihren Text innerhalb desselben <div> hinzugefügt. Diese Schriftart wird also auch auf Ihren Text angewendet. Ich habe den Text auf einem anderen <span> bewegte und wandte die gewünschten font-family : 'sans-serif' zum text.Which das Problem löst oder einfach bewegen Sie Ihren Text aus diesen <div>, das auch funktionieren wird

Mit glyphicon Ohne glyphicon

New Klasse

.newFont{ 
     font-family: sans-serif 
} 

JdFiddle

Answer 3

Sie können eine Spanne für die Glyphicons hinzufügen

<div><span class="glyphicon glyphicon-chevron-up"></span>With glyphicon</div> 
<div>Without glyphicon</div> 

Es funktioniert gut und es ist eine gute Praxis eine separate Spanne für die glyphicons hinzuzufügen. In Ihrem Code passiert, dass die Klasseneigenschaft glyphicon auf den Inhalt angewendet wird, den Sie innerhalb des Tags div schreiben.

Answer 4

Wenn Sie den Text vermeiden wollen, und Sie möchten Text in glyphicon schreiben, sollten Sie fügen glyphicon Klasse das vor Attribut Bootstrap, damit es Wirkung gibt nur die zuvor wie folgt aus:

/*add the :before to glyphicon */ 

     .glyphicon:before { 
     position: relative; 
     top: 1px; 
     display: inline-block; 
     font-family: 'Glyphicons Halflings'; 
     font-style: normal; 
     font-weight: normal; 
     line-height: 1; 

     -webkit-font-smoothing: antialiased; 
     -moz-osx-font-smoothing: grayscale; 
    }