Vertical alignment of text and icon in button

by

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

More Related Contents:

  1. Font-awesome, input type ‘submit’
  2. Five equal columns in twitter bootstrap
  3. Center the content inside a column in Bootstrap
  4. How to make the row stretch remaining height
  5. Twitter Bootstrap Customization Best Practices [closed]
  6. Twitter bootstrap modal-backdrop doesn’t disappear
  7. Left align and right align within div in Bootstrap
  8. Bootstrap 5 navbar align items right
  9. Font Awesome not working, icons showing as squares
  10. Bootstrap Carousel Full Screen
  11. Stacked Tabs in Bootstrap 3
  12. How can I control the speed that bootstrap carousel slides in items?
  13. What is Bootstrap?
  14. How to use Twitter Bootstrap 3 for non-responsive site? [duplicate]
  15. BootStrap3 keep the dropdown menu open after click on the item
  16. Should I use Bootstrap from CDN or make a copy on my server?
  17. How to include bootstrap css and js in reactjs app?
  18. Bootstrap combining rows (rowspan)
  19. Missing visible-** and hidden-** in Bootstrap
  20. bootstrap 4 nav doesn’t display hamburger on resize
  21. Angular 4: How to include Bootstrap?
  22. Change the background color in a twitter bootstrap modal?
  23. Responsive image align center bootstrap 3
  24. What’s the tabindex=”-1″ in bootstrap for
  25. Using media breakpoints in Bootstrap 4-alpha
  26. Reduce the gutter (default 30px) on smaller devices in Bootstrap3?
  27. Is there a hosted version of Twitter Bootstrap? [closed]
  28. Disable Bootstrap 3 navbar going 2 rows in medium viewport size
  29. How can I change the speed of the fade for alert messages in Twitter Bootstrap?
  30. What is the difference between Bootstrap data-toggle vs data-bs-toggle attributes?

Leave a Comment