Align the facebook icon with the text in the button

Question

I have been trying here
I couldn't get the output. Actually I want to center align the icon and the text inside the button.
Please help me to fix this
Here is my jsfiddle here

Html code:

<p class="SecWrapper">
    <a href="" class="fbLogin fbBtn clearfix">
        <span style="margin:0 auto;">
            <i class="fbIcon spriteIcon"></i> 
            <i class="pull-left">Log In with Facebook</i>
        </span>
    </a>
</p>

Css code:

.SecWrapper{width:300px;}

.fbBtn,a.fbBtn{padding: 13px;
                background: #2a6496;
                width: 100%;
                display: block;
                color: #fff;
                text-align:center;
                }

a.fbBtn:hover,.fbBtn:hover{color: #fff;}

.spriteIcon{float: left;
            background: url(http://i.imgur.com/egJconX.png) no-repeat;
            }

.fbIcon{background-position: -9px -65px;
        width: 20px;
        height: 25px;
        }

Answer 1

Use CSS Positioning here, assign position: relative; to your container element and position the F icon by using position: absolute; and left top properties

Demo

.SecWrapper{
     width:300px;
     position: relative;
}

.fbIcon{
     background-position: -9px -65px;
     width: 20px;
     height: 25px;
     position: absolute;
     left: 70px; 
     top: 10px;
}