How to avoid extra space when using glyphicon with text? - css

Question

I've a div with text in div.But the weird behavior occurs when glyphicon is added,that is spacing between the words has become more.
How to avoid this ?
<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

This one works...
<div class="glyphicon glyphicon-chevron-up"></div>With glyphicon
<div>Without glyphicon</div>
If you can't use this then use this one :
<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>
Then you only have option to click on icon to toggle.

Answer 2

You can add a span for the Glyphicons
<div><span class="glyphicon glyphicon-chevron-up"></span>With glyphicon</div>
<div>Without glyphicon</div>
It works well and its a good practice to add a separate span for the glyphicons.
What is happening in your code is that the glyphicon class property is being applied to the content that you are writing within the div tag.

Answer 3

glyphicon class applies the font-family : 'Glyphicons Halflings' in which the symbol can be rendered. But you have added your text inside same <div>. So that font will be applied to your text too. I have moved the text to another <span> and applied the desired font-family : 'sans-serif' to the text.Which solves the issue OR simply move your text out of that <div>, that too will work
With glyphicon
Without glyphicon
New Class
.newFont{
font-family: sans-serif
}
JdFiddle

Answer 4

If you want to avoid the text and you want to write text inside glyphicon you should add to bootstrap glyphicon class the before attribute so it gives effect only to the before like this :
/*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;
}