title: centering icon in responsive div
body: <p>I'm trying to center an awesome font icon (play) in it's parent div. I can achieve this by adding the proper padding with px but can't get it to stay center when the bootstrap grid is below a certain size (mobile). </p>
  
  <ol>
  <li>Would I need to use javascript to achieve this or is it possible with css?</li>
  <li>Is there a way to have the font-icon increase / decrease in size with it's parent div?</li>
  </ol>
  
  <p>Animated gif showing the play button not maintaining the center.- <a href="http://www.gfycat.com/RespectfulBruisedFruitbat" rel="nofollow">http://www.gfycat.com/RespectfulBruisedFruitbat</a></p>
  
  <p>Fiddle. I tried my best to recreate this.
  <a href="http://jsfiddle.net/lazycoda/syxpq07b/3/" rel="nofollow">http://jsfiddle.net/lazycoda/syxpq07b/3/</a></p>
  
  <pre><code>.fa-play:before {
      content: "\f04b";
  }
  
  .fa-play {
      font-size: 26px;
      padding: 36%;
      display: inline-block;
  }
  </code></pre>