css - Font Awesome - 堆叠图标时，如何让第二个图标居中

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 就可以了

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

这是一个 online example