Font Awesome - When stacking icons, how can I center the second icon - css

Question

When stacking icons, how can I center the second icon?
I'm trying to create a white background for a circle and a checkbox see plnkr example:
http://plnkr.co/5JM1yk6eoeAnj1VgkxXA
<span class="fa-stack">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-check-circle fa-stack-2x"></i>
</span>
input[type="checkbox"]:checked + label .fa-check-circle {
display: block;
background: white;
border-radius: 50%;
color: #37B34A;
height: 28px;
width: 28px;
}
.fa-circle-thin {
color: #DDDDDD;
background-color: #FFFFFF;
border-radius: 50%;
height: 28px;
width: 28px;
text-align:center;
cursor: pointer;
}

Answer 1

Giving a margin-left to .fa-stack .fa-check-circle will do it
.fa-stack .fa-check-circle {
margin-left: 2px;
}
Although I think this is not the best way of doing what you're trying to do there, I think this way should be a better way of doing it: http://jsfiddle.net/7w41fboo/
======== Update =========
If you need to remove the white space of the background of your checked circle, you can do it with this trick. First exchange the fa-check-circle for fa-check like this:
HTML
<div class="faWhiteBg">
<input type="checkbox">
<label>
<span class="fa-stack">
<i class="fa fa-circle-thin fa-stack-2x"></i>
</span>
Unchecked
</label>
</div>
<br />
<input type="checkbox" checked>
<label>
<span class="fa-stack">
<i class="fa fa-check"></i>
</span>
Checked
</label>
Then style your fa-check in your CSS
.fa-stack .fa-check {
background: #37B34A;
color: #fff;
font-size: 22px;
padding: 5px;
border-radius: 50%;
}
.fa-stack {
cursor: pointer;
}
/* The code below is a code to display the white background only for the non checked circle, if you don't want it you can remove this part of the code and remove it from your HTML as well*/
.faWhiteBg .fa-stack {
background: #fff;
border-radius: 50%;
}
Here's an online example