Center glyphicon content

Question

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

Answer 1

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/

Answer 2

I believe the root problem here is with the SVGs that the icon font was built from. I've built icon fonts before from SVGs and saw this exact same behavior. If the symbol wasn't centered within its SVG viewbox, you'd get a glyph that was off-center like you've observed.

Developing a code-based solution would get super messy, because you'd have to individually account for each glyph that isn't centered, and then your offsets would have to be relative to the size of the icon so the offsets scale with the font-size of the icon. It's certainly do-able, but it seems like the sort of thing that would be a headache to maintain.

I would recommend one of the following:

• Accept the glyphicon set for what it is (a free icon font) and live with its imperfections
• Look for another icon font that doesn't have this same issue--be willing to pay for a license
• Create your own icon font so you can ensure that all glyphs are centered

Answer 3

Almis Hi there. Your demo code is only using just the span holding the glyphicon it has no Width to center within.

As soon as you do something like this it will center.

<div class="text-center">
<span class="glyphicon glyphicon-plus"></span>
</div>
<br>
<span class="glyphicon glyphicon-plus col-xs-12 text-center"></span>

Here is a Fiddle.