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

Question

我有 3 个单选按钮，每个按钮上都有一个来自“font awesome”库的“圆圈”图标。我试图用另一个“细圆圈”图标包裹我在按钮上设置的每个图标。所以“细圆”将在“圆”之上。

我尝试使用 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