包装带有图标的单选按钮与另一个图标

Question

我有3个单选按钮，每个按钮上都有'font awesome'库中的'circle'图标。我试图用另一个“细圆圈”图标包裹我在按钮上设置的每个图标。因此，“细圆圈”将位于“圆圈”的顶部。

我尝试使用this回答但是没有用。也许是因为它是一个解决方案，只是在一个图标上，但在我的情况下，我试图用一个单选按钮。

HTML：

<div class="container-fluid text-center" id="sm-jum-btns">

 <input type="radio" name="optradio">
  <label id="btn-left"class="radio-inline sm-jum-btn ">
    <span class="fa fa-layers fa-fw fa-circle-thin">
      <i class="fa fa-circle"></i>
    </span>
  </label>

 <input type="radio" name="optradio">
  <label id="btn-left"class="radio-inline sm-jum-btn ">
    <span class="fa fa-layers fa-fw fa-circle-thin">
      <i class="fa fa-circle"></i>
    </span>
  </label>

 <input type="radio" name="optradio">
  <label id="btn-left"class="radio-inline sm-jum-btn ">
    <span class="fa fa-layers fa-fw fa-circle-thin">
      <i class="fa fa-circle"></i>
    </span>
  </label>

CSS：

#sm-jum-btns input {
      margin:0;padding:0;
     -webkit-appearance:none;
     -moz-appearance:none;
      appearance:none;
      margin-top: 180px;

}

.fa-circle-thin {
  color: #ffb300;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius:50px;
  font-size: 40px;
}

.fa-circle {
  color: #ffb300;

  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius:50px;
  font-size: 40px;
}

.fa-circle-thin:hover {
  color: #37100B;
}

.fa-circle-thin {
  font-size: 50px;
}

.fa-circle-o {
  font-size: 60px;
}

Codepen

Answer 1

我相信这是你想要实现的目标。我将label的位置设置为relative，这样我就可以将圆圈绝对定位在每个项目的边界内。没有相对定位，薄圆圈的位置都相同，这不是你想要的。

label {
  …
  position: relative;
}

.fa-circle-thin::before {
  …
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 4px;
}

Demo