Search code examples
csstwitter-bootstrapglyphicons

Center Twitter Bootstrap 3 Glyphicons in buttons

I am now using Twitter Bootstrap 3 RC2 as well as Twitter Bootstrap which has moved into a separate repository. I have noticed, if used in a button with text the icon is not centered very well:

enter image description here

The icon and the text have the same bottom line, but I believe for a good looking button the icon should be centered based on the text, shouldn't it? Any idea how to achieve this?

http://bootply.com/74652

Solution

  • Move the text out of the <span> with the glyphicon and apply vertical-align: middle; to the <span>

      <button class="btn btn-default">
    <span class="glyphicon glyphicon-th" style="vertical-align: middle;"></span> Centered
  </button>

    Demo

    This works in Bootstrap 4 with Font Awesome icons like so

    <button class="btn btn-default" style="vertical-align: middle;">
    <i class="fa fa-times"></i> Centered
</button>