Add font awesome icon on image

Question

I need to add an icon on image onclick. I added a border and its is shown correctly onclick but not the font awesome icon

HTML

.couleursProduits input[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.couleursProduits input[type=radio] + img {
  cursor: pointer;
  float: left;
  outline: 1px solid #d0cdcd;
  outline-offset: -2px;
}
.couleursProduits input[type=radio]:checked + img {
  outline: 2px solid #ceb284;
  outline-offset: -2px;
}
.couleursProduits input[type=radio]:checked + img:after {
  content: "\f112";
  font-family: "woodmart-font";
  display: inline-block;
  font-size: 16px;
  line-height: 50px;
  font-weight: 600;
}

<label class="couleursProduits">
  <input type="radio" name="couleur" value="v1">
  <img width="25%" src="https://picsum.photos/id/100/367/">
</label>
<label class="couleursProduits">
    <input type="radio" name="couleur" value="v2">
    <img width="25%" src="https://picsum.photos/id/101/367/">
</label>
<label class="couleursProduits">
    <input type="radio" name="couleur" value="v3">
    <img width="25%" src="https://picsum.photos/id/102/367/">
</label>
<label class="couleursProduits">
    <input type="radio" name="couleur" value="v4">
    <img width="25%" src="https://picsum.photos/id/103/367/">
</label>

Full code : https://jsfiddle.net/rxvdm8ok/