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

我有3个单选按钮，每个按钮上都有一个来自“font Asome”库的“圆圈”图标。我试图用另一个“细圆”图标来包装我在按钮上设置的每个图标。所以“薄圆”将位于“圆”的顶部

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

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>

---

我相信这就是你想要实现的目标。我将

标签

的位置设置为

相对

，这样我就可以绝对地将圆圈定位在每个项目的边界内。如果没有相对定位，薄圆的位置将完全相同，这不是您想要的

label {
  …
  position: relative;
}

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

在此链接中，转到stacked icon，您将了解他想要实现的目标

label {
  …
  position: relative;
}

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