88

I'm having trouble vertically aligning a font-awesome icon with text within a button under the Bootstrap framework. I've tried so many things including setting the line-height, but nothing is working.

<button id="edit-listing-form-house_Continue" 
        class="btn btn-large btn-primary"
        style=""
        value=""
        name="Continue"
        type="submit">
    Continue
    <i class="icon-ok" style="font-size:40px;"></i>
</button>

http://jsfiddle.net/fPXFY/

How can I get this to work?

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
Shane
  • 2,375
  • 4
  • 22
  • 31

4 Answers4

136

There is one rule that is set by font-awesome.css, which you need to override.

You should set overrides in your CSS files rather than inline, but essentially, the icon-ok class is being set to vertical-align: baseline; by default and which I've corrected here:

<button id="whatever" class="btn btn-large btn-primary" name="Continue" type="submit">
    <span>Continue</span>
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>

Example here: http://jsfiddle.net/fPXFY/4/ and the output of which is:

enter image description here

I've downsized the font-size of the icon above in this instance to 30px, as it feels too big at 40px for the size of the button, but this is purely a personal viewpoint. You could increase the padding on the button to compensate if required:

<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit">
    <span>Continue</span>
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>

Producing: http://jsfiddle.net/fPXFY/5/ the output of which is:

enter image description here

nickhar
  • 19,981
  • 12
  • 60
  • 73
  • 17
    You may also want to add `margin-top: -0.125em`, as I've found that there is still some space at the top if you use an icon like "bars" (ubiquitous mobile nav button). – cr0ybot Mar 03 '14 at 20:16
  • 1
    Had a similar problem with Google Material Icons and this fixed it. – John Crawford Jul 03 '17 at 16:09
  • For those that were setting `style="height: x px;"` and still struggling with vertical alignment issues. I found that instead setting `style="padding: y px;"` did the trick (Bootstrap 4) – Ruben Flam-Shepherd Aug 29 '20 at 20:00
  • ```vertical-align: middle``` in icon elements did the job, thanks! (In Bootstrap just add the ```align-middle``` class) – MikhailRatner Apr 07 '22 at 11:45
23

Alternativly if your using bootstrap then you can just add align-middle to vertical align the element. 

<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit">Continue
    <i class="icon-ok align-middle" style="font-size:40px;"></i>
</button>
Nick
  • 138,499
  • 22
  • 57
  • 95
Ali Kazai
  • 383
  • 3
  • 7
  • 1
    Thank you! But I use `align-top` because `align-middle` does not make an icon and text on the same level. – Nairum Aug 11 '19 at 11:24
11

Bootstrap 4.3.1 just add class d-inline-flex align-items-center in your element parent, you also can use my-0 to remove excess margin in font-awesome icon, like this:

<a href="" class="btn btn-success d-inline-flex align-items-center"><i class="fab fa-whatsapp h1 my-0 pr-2"></i>Whatsapp</a>
Marcos Paolo
  • 301
  • 2
  • 7
5

Just wrap the button label in an extra span and add class="align-middle" to both (the icon and the label). This will center your icon with text vertical.

<button id="edit-listing-form-house_Continue" 
    class="btn btn-large btn-primary"
    style=""
    value=""
    name="Continue"
    type="submit">
<span class="align-middle">Continue</span>
<i class="icon-ok align-middle" style="font-size:40px;"></i>

kostjanix
  • 51
  • 1
  • 1