title: Overlaying a font-awesome icon on an image in css
body: <p>I tried to overlay a font-awesome icon on an image, but the image is visible and the icon is not visible.</p>
  <pre><code>&lt;i class=&quot;fa fa-play-circle-o&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
  &lt;img src=&quot;../images/tbt.jpg&quot;&gt;&lt;/img&gt;
  
  i {
     position: absolute;
     z-index: 1;
     top: 50%;
     left: 50%;
  }
  img {
     position: relative;
     z-index: -1;
  }
  </code></pre>