Center Twitter Bootstrap 3 Glyphicons in buttons

Question

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

I can't see the glyph in the example you provided. Do you mean you want the glyph and text both centered within the button? — Mister Epic, Aug 16 '13 at 12:55

score 58 · Accepted Answer · edited Nov 23 '17 at 02:42

58

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>

edited Nov 23 '17 at 02:42

Ryan Knutson

108
2
14

answered Aug 16 '13 at 13:10

Russ Cam

124,184
33
204
266

3

I had a problem where the button wasn't shown with the same height as an input text paired inside an `input-group`. That problem was fixed with this solution, although the icon first appeared too low on the button. Using `vertical-align:top` fixed that. – Bjørn Stenfeldt Nov 11 '13 at 11:01
1

Note: vertical-align middle may not always fix it, especially if your word has only ascenders (`f`, `t`) or descenders (`g`, `y`, `q`), as the middle of the vertical box of the word will not exactly align with the middle of the icon's vertical box. – kumarharsh Jan 19 '15 at 06:39
Was about to go the hacky route and use an image instead (*yuck!*). Didn't know that the `vertical-align` property could be used for glyphs like this! Thanks! – Priidu Neemre Sep 16 '15 at 13:35

kumarharsh · Answer 2 · 2013-08-16T13:18:13.267

27

Apply a vertical-align: -{N}px; style on the .glyphicon-th to shift it N pixels up/down.

edited Aug 16 '13 at 13:18

answered Aug 16 '13 at 13:10

kumarharsh

18,961
8
72
100

score 3 · Answer 3 · answered Apr 08 '16 at 13:33

For some vertical-align might not work due to positioning: If you look into .glyphicon class you'll see it is set to relative, try setting it to 'inherit' e.g:

.glyphicon.v-centered {
    position: inherit;
    vertical-align: middle;
}

This should also work for icons not in buttons, e.g. tabs.

score 1 · Answer 4 · answered Aug 16 '13 at 12:56

1

Try vertical-align: middle; on .glyphicon-th:before

answered Aug 16 '13 at 12:56

Mihai Alex

678
6
13

With middle the text goes up and lines with the glyph icon bottom border. Sad, because it sounds reasonable to me. – Mahoni Aug 16 '13 at 13:09

score 1 · Answer 5 · answered Jul 10 '14 at 15:35

None of the methods above worked well for me by themselves, but using display: inline-block; vertical-align: middle on the elements did. It's the inline-block that seems to be key.

.vcenter * {
    vertical-align: middle;
    display: inline-block;
}

.btn i {
    margin-left: 10px;
    font-size: 20px;
}

with

<div class="vcenter">
  <button class="btn btn-default btn-lg"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
  <button class="btn btn-default"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
  <button class="btn btn-default btn-sm"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
</div>

See http://www.bootply.com/UbY78zM8pD for live example.

score 1 · Answer 6 · answered May 17 '15 at 18:06

1

I managed to do it like this:

.glyphicon.center:before {
    vertical-align: middle;
}

and use <span class="glyphicon center glyphicon-th"></span>.

answered May 17 '15 at 18:06

Timo Türschmann

4,388
1
22
30

score 1 · Answer 7 · edited Jan 18 '18 at 21:22

Problem: Glyph icon was 2 px too high above the button text. Fixed it as follows using examples here. Thank you (Alastair Maw).

I managed to get mine working as follows:

HTML

<div class="col-xs-12">
    <a title="" class="btn btn-block btn-info oa-btn-spacer_homepage oa-ellipsis" role="button" href="default.aspx?action=page&name=creditcard">
        <span class="glyphicon glyphicon-credit-card glyph_Credit"></span> Update Your Credit Card and Billing Information
    </a>
</div>

CSS

#panelTopic  .glyph_Credit {
    vertical-align: middle;
    display: inline-block;
    padding-bottom:6px;
}

score 0 · Answer 8 · answered Aug 16 '13 at 13:04

0

<button class="btn btn-default">
          <span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span>
          <span style="font-size: 17px;">Not Centered</span>
    </button>

please increase or decrease the font size according to your requirement

answered Aug 16 '13 at 13:04

rajeshpanwar

1,223
1
11
25

Way too much css... @Russ's answer is more practical. – kumarharsh Aug 16 '13 at 13:11
3

"Way too much css"? There's only one property there. The `2nd` span is just an example. – losnir Aug 20 '13 at 15:05
What I meant was that tying the icons so tightly with the font-size is not good. I don't know what I was thinking when I wrote that older comment :P – kumarharsh Jun 03 '14 at 05:40

score 0 · Answer 9 · answered Jan 09 '14 at 09:46

0

Other way

<button class="btn default" id="IdBack">
  <i class="glyphicon glyphicon-hand-left"></i> 
  <b>Back</b>
</button>

answered Jan 09 '14 at 09:46

Shalini

219
1
5
16

score 0 · Answer 10 · answered Oct 22 '15 at 07:12

Add a margin of the specific pixels or percentage. In my app, this worked beautifully, based on the dimensions of the area.

CSS:

.someWrapperClass button span {
    margin-top: 120%;
}

HTML:

<div class="someWrapperClass">
    <button type="button" ng-click="SomeMethod()">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </button>
</div>

Center Twitter Bootstrap 3 Glyphicons in buttons

10 Answers10

Linked