title: Responsive positioning icons on images using absolute
body: <p>I'm trying to place font-awesome icons on the top of images, it works if the images keeps stick in one location, but due to the screen size the images might move down and up  without the icons  </p>
  
  <p>for example </p>
  
  <p>first case it work fine</p>
  
  <p><a href="https://i.stack.imgur.com/QIlfJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QIlfJ.png" alt="enter image description here"></a></p>
  
  <p>second case  one image move down when zoom in but the icon doesn't 
  <a href="https://i.stack.imgur.com/luM8S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/luM8S.png" alt="enter image description here"></a></p>
  
  <p>Third case  all images move below each other but the icons don't </p>
  
  <p><a href="https://i.stack.imgur.com/zo6Xe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zo6Xe.png" alt="enter image description here"></a></p>
  
  <p>HTML code</p>
  
  <pre><code>&lt;span class="images_wrapper"&gt;
      &lt;i class="fa fa-times-circle-o delete_image delete_image"&gt;&lt;/i&gt;
      &lt;img src="https://ae01.alicdn.com/kf/UTB8ROsoXwnJXKJkSaelq6xUzXXab.jpg"&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Css </p>
  
  <pre><code>.images_wrapper {
      position: relative;
  }
  
  .images_wrapper i {
      position: absolute;
      color: red;
  }
  </code></pre>
  
  <p>How to make icons move with the images ?</p>
  
  <p><a href="https://jsfiddle.net/1vzd5ofv/1/" rel="nofollow noreferrer">https://jsfiddle.net/1vzd5ofv/1/</a></p>
  
  <p>try to zoom in as mash as you can until the images move down </p>
  
  <p>Thanks.</p>