Vertical alignment of text and icon in button
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>
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:
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>