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

给margin-left .fa-stack .fa-check-circle这样做

.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

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

1 个答案: