Font Awesomeでラジオボタンをデザインしてみる

<label>
  <input type="radio" name="radio1" class="radiobutton">
  <span class="radio-fontas"></span>ラジオボタン1
</label>
<label>
  <input type="radio" name="radio1" class="radiobutton">
  <span class="radio-fontas"></span>ラジオボタン2
</label>

.radiobutton {
  display: none;
}
label {
display:block;
}
.radio-fontas {
  vertical-align: middle;
  font-size: 22px;
}
.radiobutton + .radio-fontas:before {
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  color: #ccc;
  content: '\f192';
}
.radiobutton:checked + .radio-fontas:before {
  color: #2db29c;
}