css - 在图像上添加字体真棒图标

Question

我需要在图像 onclick 上添加一个图标。我添加了一个边框，它在点击时正确显示，但不是字体真棒图标

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>

完整代码： https ://jsfiddle.net/rxvdm8ok/

标签： css