堆叠图标时,如何使第二个图标居中?

我正在尝试为圆圈和复选框创建白色背景,请参见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;
}

#1楼 票数:0 已采纳

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

这是一个在线示例

  ask by BeastCode translate from so

未解决问题?本站智能推荐:

1回复

如何在悬停时用背景填充字体真棒图标?[重复]

这个问题在这里已经有了答案: 渐变文字颜色(7 个回答) 7 个月前关闭。 当悬停时,我正在尝试用线性渐变填充字体很棒的图标 与 我显然有一个方形的背景;
2回复

更改FontAwesome图标的颜色

如何更改图标<i class="fa fa-exclamation-triangle"></i>的内部(白色)颜色? PS 应用<i class="fa fa-exclamation-triangle" style="color:red"></i>不
1回复

将“字体真棒”图标垂直居中放置在表格左侧

我正在尝试在表格元素的左侧放置一个超棒的字体图标,以使其垂直于表格居中。 这是我目前所拥有的: HTML CSS 这给了我这个结果:
1回复

居中字体真棒图标

之前已经问过这个问题,但是在阅读了这些线程中的每条评论后,我都无法找到有效的解决方案。 我正在尝试简单地将真棒字体图标与div中的文本居中对齐。 文本完美居中,图标偏离左侧中心。 HTML: CSS: 当我将图标的宽度设置为7%时,我可以将它居中放置,但这只是一个静态解决方案。
1回复

如何垂直放置字体真棒图标

我在网页上使用了tont很棒的音量图标。 我很难将其垂直放置在其父p元素中。 这是HTML代码 这是CSS 目前,音量图标显示在p.dlg_content的顶部。 它需要与垂直中间对齐。 我一直在更改span.fa-volume-up-dlg属性,但是我没有想出任何有效的方法。
1回复

如何将元素居中放置在堆叠图标中

我有以下代码片段: <!DOCTYPE html> <html> <head> <title></title> <link href="https://stackpath.bootstrapcdn.com/font-aweso
1回复

Chrome上的字体真棒堆叠图标对齐问题

在屏幕快照中,数字9和2的图标是堆叠的字体图标。 我正在使用vuetify作为我的前端框架 在Firefox上,我的图标显示正确,并且与其他图标显示在同一行。 但是在Chrome和Safari中,它们并没有对齐 我尝试设置display: inline ,但是堆叠的图标过高
1回复

堆叠多个字体真棒图标

以下span旨在通过CSS类分配堆叠多种字体 最终结果是第二个图标正确堆叠,但第三个图标表现得好像在外面 fa-class 定义为 我错过了什么? 或者这可能吗?