Aligning content with float:left :before

http://stackoverflow.com/questions/42494788/aligning-content-with-floatleft-before

by tofutim

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<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>

CSS

.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;
}

.accountButton:hover {
    background-color: #B9B9B9;
    border: 1px solid #FFF;
    -moz-box-shadow: 0 0 0;
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
    opacity:1;
}

.accountButton:focus {
    outline: gold solid 1px;
}

#AmazonExchange:before {
    font-family: fontAwesome;
    content: "\f270";
    font-size: large;
    float:left;
    width:32px;
    text-align: center;
    background-color: gray;
}

        #LinkedInExchange:before {
            font-family: fontAwesome;
            content: "\f0e1";
            font-size: large;
            float:left;
            width:32px;
                text-align: center;
        }

        #FacebookExchange:before {
            font-family: fontAwesome;
            content: "\f230";
            font-size: large;
            float:left;
            width:32px;
    text-align: center;
        }

        #GoogleExchange:before {
            font-family: fontAwesome;
            content: "\f2b3";
            font-size: large;
            float:left;
            width:32px;
    text-align: center;
        }

        #MicrosoftAccountExchange:before {
            font-family: fontAwesome;
            content: "\f17a";
            font-size: large;
            float:left;
            width:32px;
    text-align: center;
        }

#MicrosoftAccountExchange {
    //background-image:...