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

Question

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

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

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

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

如果您需要去除选中圆圈背景的白色 space，可以使用此技巧。
首先像这样将 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

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

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

css

background

font-awesome