hollow circle behind social icon - css

Question

Using CSS I would like to place a hollow circle behind a social icon and when I hover over the social icon the hollow circle is then filled, when I attempt to do this the circle is squished to the right of my social icon (fontawesome). I want the icon to be centered within the circle, also I would like to know the best way of going about this if I wanted to have have several social icons aligned horizontally each within a circle a distance of 100px apart. Thanks.
My CSS code:
.circle {
border: 2px solid #666;
border-radius: 50%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
width: 80px;
height: 80px;
z-index: 86;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
}
.circle:hover {
background-color: #666;
}
.fa-twitter {
color: #fff;
z-index: 99;
}
Wordpress - Header.php
<div class='header-social-icons'>
<div class='twitter'>
<i class='fa fa-twitter'></i>
<i class='circle'></i>
</div>
</div>

Answer 1

Just wrap your social icon inside the circle div.
HTML:
<div class='header-social-icons'>
<div class='twitter circle'>
<i class='fa fa-twitter'></i>
</div>
</div>
Updated CSS:
.fa-twitter { display:block; }
.circle { width: 50px; height: 50px; padding: 15px;}
DEMO

Answer 2

Updated HTML:
<div class='header-social-icons'>
<div class='twitter'>
<i class='fa fa-twitter'></i>
<i class='circle'>Twitter</i>
<i class='circle'>Facebook</i>
<i class='circle'>Google+</i>
<i class='circle'>Reddit</i>
</div>
</div>
Updated CSS:
.circle {
display: inline-block;
margin-right: 100px;
text-align: center;
line-height: 75px;
border: 20px solid #666;
border-radius: 50%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
width: 80px;
height: 80px;
z-index: 86;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
}
Demo.
I hope this helped. Updated to align text's width and height.