How to add an icon to an active image

Question

I’m trying to make the image that is active stay with an incone of the heart on top, Font Awesome, or a heart in png, tried the pseudo-class :Active but it didn’t work.

https://fontawesome.com/icons/heart
If someone power a force, because I tried to put a heart in PNG on top of the active image, but still could not.

body{
  background-color: green;
}

.nav-control {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 102px;
  height: 92px;
  transition: 0.2s;
  margin-right: 20px;
  cursor: pointer;
  margin-top: 32px;
  z-index: 3;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <div class="slider__nav-bar">   
         <img src="https://i.imgur.com/0JGIa6o.png" alt="" class="nav-control">
         <img src="https://i.imgur.com/kR6A8GJ.png" alt="" class="nav-control">
         <img src="https://i.imgur.com/asycxT9.png" alt="" class="nav-control">
        </div>

Answer 1

Guy puts the imagem within a label along with a input of the kind radio. If the label was clicked the icon appears.

I made a simple example for you to adjust the CSS to your taste...

body{
  background-color: green;
}

.nav-control {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 102px;
  height: 92px;
  transition: 0.2s;
  margin-right: 20px;
  cursor: pointer;
  margin-top: 32px;
  z-index: 3;
}
.slider__nav-bar {
  display: flex;
}
label {
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
}
[name="hart"],
i.fa-heart {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  color: red;
  font-size: 32px;
}
[name="hart"]:checked + i.fa-heart {
  display: inline-block;
}

  

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<div class="slider__nav-bar">   
  <label>
    <input type="radio" name="hart">
    <i class="fa fa-heart"></i>
    <img src="https://i.imgur.com/0JGIa6o.png" alt="" class="nav-control">
  </label>
  <label>
    <input type="radio" name="hart">
    <i class="fa fa-heart"></i>
    <img src="https://i.imgur.com/kR6A8GJ.png" alt="" class="nav-control">
  </label>
  <label>
    <input type="radio" name="hart">
    <i class="fa fa-heart"></i>
    <img src="https://i.imgur.com/asycxT9.png" alt="" class="nav-control">
  </label>
</div>