Как я могу скопировать эту отметку на миниатюре для веб-сайта электронной коммерции? В частности, галочка в правом верхнем углу

Question

[

То, что происходит здесь, заключается в том, что, когда я нажимаю на определенный эскиз, на нем появляется галочка. Это в основном метка для поля ввода. Как я могу воспроизвести что-то подобное? Что мне нужно, это когда я нажимаю на конкретную миниатюру обуви, в правом верхнем углу появляется галочка, указывающая, что она выбрана.

Я вытащил HTML разметку из источника. Здесь используется SVG, но мне нужно использовать его в качестве метки для поля ввода. Вот как выглядит HTML:

<div class="variation">
  <div class="tick_icon">
    <svg class="gl-icon">
      <use xlink:href="#checkmark">
       <symbol id="checkmark" viewBox="0 0 19 19">
         <path fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" d="M2.5 10.5l4 4 10-10">
         </path>
       </symbol>
      </use>
    </svg>
  </div>
  <div class="image_holder" style="background-image: url('url_here.com');">
  </div>
</div>

Здесь CSS для того же:

.variation{
 max-width: 70px;
 margin: 0 10px 10px 0;
 display: block;
 position: relative;
 height: 70px;
}
.tick_icon{
 border-radius: 50%;
 background-color: #000;
 position: absolute;
 right: 0;
 width: 24px;
 height: 24px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.gl_icon{
 height: 19px;
 width: 19px;
 display: inline-block;
 color: #fff;
}

Мой собственный код (упрощенно) настроено так:

<input>
 <label style="border;1px solid black;border-radius:50%">
  <i style="background-image:url('image-url-here');border-radius:50%"></i>
 </label>

Итак, по сути, мне нужно поменять метку CSS, чтобы она выглядела как галочка.
Вот так выглядит мой вывод:

Answer 1

.wrapper ul li {
  display: inline-block;
  width: 50px;
  height: 50px;
  position: relative;
  background: #ccc;
  margin: auto 5px;
  border-radius: 50%;
}

.wrapper ul li span img {
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wrapper span i {
  font-size: 16px;
  position: absolute;
  right: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="wrapper">
  <ul>
    <li>
      <span>
                  <i class="fa fa-check-circle"></i>
                </span>
      <span>
                    <img src="https://img.favpng.com/9/17/9/blue-symbol-sphere-logo-png-favpng-ZucUN8smxTCWFbeFNrT4JybTT.jpg">
                </span>
    </li>
    <li>
      <span>
                   <i class="fa fa-check-circle"></i>
                </span>
      <span>
                    <img src="https://img.favpng.com/9/17/9/blue-symbol-sphere-logo-png-favpng-ZucUN8smxTCWFbeFNrT4JybTT.jpg">
                </span>
    </li>
  </ul>
</div>

Здравствуйте, проверьте, не повезло ли вам с этим, но в следующий раз предоставьте свой фрагмент, чтобы всем было полезно ...