真棒字体-堆叠图标时，如何居中放置第二个图标

Question

堆叠图标时，如何使第二个图标居中？

我正在尝试为圆圈和复选框创建白色背景，请参见plnkr示例：

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

给.fa-stack .fa-check-circle margin-left一个margin-left就可以了

.fa-stack .fa-check-circle {
    margin-left: 2px;
}

尽管我认为这不是做您尝试做的事情的最佳方法，但我认为这种方法应该是一种更好的方法： http : //jsfiddle.net/7w41fboo/

========更新=========

如果您需要删除选中圆圈背景的空白，可以使用此技巧来完成。
首先将fa-check-circle交换为fa-check如下所示：

的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>

然后在CSS中设置fa-check的样式

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

这是一个在线示例