Search code examples
csstwitter-bootstrapglyphicons

Center glyphicon content

I using Google Chrome Inspector and if you select the before pseudo of the glyphicon you will see that there is empty space at the right. How I can center the glyphicon?

I tried to set text align but it doesn't work.

<span class="glyphicon glyphicon-plus"></span>
<style>.glyphicon { font-size: 120px; }</style>

jsFiddle

Updated link jsFiddle 2

Glyphicon

Solution

  • I gave letter spacing for pseudo element and it did the trick. I tried changing the font-size and I see that white space is not appearing.

    .glyphicon:before{
   letter-spacing: -0.085em;
 }

    Working fiddle: http://jsfiddle.net/MasoomS/1z79r22y/