Aligning text with floated :before icon - html

Question

I am working on a button style for Azure Active Directory B2C. Azure automatically provides the following content
<div class="options">
<div>
<button class="accountButton firstButton" id="AmazonExchange" tabindex="1">Amazon</button>
</div>
<div>
<button class="accountButton" id="LinkedInExchange" tabindex="1">LinkedIn</button>
</div>
<div>
<button class="accountButton" id="FacebookExchange" tabindex="1">Facebook</button>
</div>
<div>
<button class="accountButton" id="GoogleExchange" tabindex="1">Google+</button>
</div>
<div>
<button class="accountButton" id="MicrosoftAccountExchange" tabindex="1">Microsoft</button>
</div>
</div>
Using FontAwesome and :before css magic, I am able to add an icon, and fix width the button
.accountButton {
border: 1px solid #FFF;
color: #FFF;
margin-left: 0;
margin-right: 2px;
padding-right: 15px;
transition: background-color 1s ease 0s;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
text-align: center;
word-wrap: break-word;
width: 120px;
background-color: #5x05050;
opacity: 0.7;
}
#AmazonExchange:before {
font-family: fontAwesome;
content: "\f270";
//font-size: large;
float:left;
width:32px;
text-align: center;
}
This is nice, but I would like the icons to be just a bit bigger. However, increasing the size of the FontAwesome item to large causes the primary text to go up, as it is aligned to the top of the float:left.
I've tried a variety of valign combinations with no luck. I cannot change the html (as it is dynamically generated). How can I center the "Amazon" with the larger icon? (Notice that the Amazon text is now higher than the LinkedIn and other text.)
Attempted jsfiddle, doesn't look quite the same, but should show the issue.
https://jsfiddle.net/tofutim/0637yknj/9/

Answer 1

There isn't a dynamic way to adjust valign with floating elements. You can either use display: inline-block; + vertical-align: middle;
.accountButton {
vertical-align: middle;
line-height: 1.5;
}
.accountButton:before {
vertical-align: middle;
margin-right: 8px;
}
jsFiddle
Or, use display: flex; + align-items: center;
.accountButton {
display: flex;
align-items: center;
line-height: 1.5;
}
.accountButton:before {
margin-right: 8px;
}
jsFiddle
The line-height part is just to make the buttons a bit taller, you can also use padding-top + padding-bottom instead.

Answer 2

Giving a line-height to .accountButton might correct this issue for you. This will vertically centre text within the given vertical space, and in your example should be equal to the desired height of the button.
Try something like: line-height: 30px;.