wrapping radio button with icon on it with another icon

Question

I have 3 radio buttons and on each of them I have a 'circle' icon from 'font awesome' library. I am trying to wrap each icon I set on the buttons with another 'thin circle' icon. So the 'thin circle' will be on top of the 'circle'.

I tried to use this answer but it ain't worked. Maybe because it's a solution to do it just on an icon but with my situation I am trying to do it with a radio button.

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

I believe this is what you're trying to achieve. I set the label's position to relative so that I could absolutely position the circle within each item's boundary. Without the relative positioning, the thin circles would all be positioned identically, which is not what you wanted.

label {
  …
  position: relative;
}

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

Demo