Vertical alignment of text and icon in button

Question

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    lt button id  edit-listing-form-house Continue           class  btn btn-large btn-primary          style            value            name  Continue          type  submit  gt      Continue      lt i class  icon-ok  style  font-size 40px   gt  lt  i gt   lt  button gt    http   jsfiddle net fPXFY   How can I get this to work

User · Answer

Alternativly if your using bootstrap then you can just add align-middle to vertical align the element     lt button id  whaever  class  btn btn-large btn-primary  style  padding  20px   name  Continue  type  submit  gt Continue      lt i class  icon-ok align-middle  style  font-size 40px   gt  lt  i gt   lt  button gt

User · Answer

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    lt button id  whatever  class  btn btn-large btn-primary  name  Continue  type  submit  gt       lt span gt Continue lt  span gt       lt i class  icon-ok  style  font-size 30px  vertical-align  middle   gt  lt  i gt   lt  button gt    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    lt button id  whaever  class  btn btn-large btn-primary  style  padding  20px   name  Continue  type  submit  gt       lt span gt Continue lt  span gt       lt i class  icon-ok  style  font-size 30px  vertical-align  middle   gt  lt  i gt   lt  button gt    Producing  http   jsfiddle net fPXFY 5  the output of which is

User · Answer

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    lt button id  edit-listing-form-house Continue       class  btn btn-large btn-primary      style        value        name  Continue      type  submit  gt   lt span class  align-middle  gt Continue lt  span gt   lt i class  icon-ok align-middle  style  font-size 40px   gt  lt  i gt

[twitter-bootstrap] Vertical alignment of text and icon in button

Examples related to twitter-bootstrap

Examples related to alignment

Examples related to webfonts

Examples related to font-awesome