Vertical alignment of text and icon in button

alignment, font-awesome, twitter-bootstrap, webfonts

Solution

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:

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:

Problem

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?

Original source