title: How to center a font awesome icon over an image in bootstrap 3?
body: <p>I am trying to center a <code>font-awesome</code> icon over an image in <code>bootstrap 3</code>.</p>
  
  <p>Here is the image code contained in a div:</p>
  
  <pre><code>&lt;div id="quickVideo"&gt;
      &lt;a data-fancybox href="https://player.vimeo.com/video/153113362?autoplay=1&amp;color=54b3e4" class="adminDemoVideo"&gt;
          &lt;img src="~/Images/..." class="img-responsive"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I could do that using <code>::before</code> on div element but the problem here is that it is not responsive by default.</p>
  
  <pre><code>.adminDemoVideo::before {
      font-family: 'FontAwesome';
      content: '\f04b';
      margin-top: 1.35em;
      margin-left: 2.8em;
      color: white;
      z-index: 1000;
      font-size: 50px !important;
      position: absolute;
      padding-bottom: 3px;
      padding-top: 3px;
      padding-left: 25px;
      padding-right: 15px;
      background-color: rgba(23, 35, 34, 0.75);
      border-radius: 5px 5px 5px 5px;
  }
  </code></pre>
  
  <p>Here is how it looks like in desktop display size:</p>
  
  <p><a href="https://i.stack.imgur.com/5gJj1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5gJj1.png" alt="Desktop View"></a></p>
  
  <p>When I turn it into mobile or tablet view size it just get distorted due to margin etc just like below:</p>
  
  <p><a href="https://i.stack.imgur.com/3Erpi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3Erpi.png" alt="Mobile or tablet view"></a></p>
  
  <p>Is there any way how to fix it without knowing the screen size ? 
  It does not matter for me if the solution is in <code>css</code> or <code>javascript</code> or <code>jquery</code>.</p>
  
  <p>Hope this is not duplicate but did not find any proper solution here...</p>
  
  <p>Thanks in advance.</p>