title: Add top padding to font awesome icons
body: <p>I'm trying to add some top padding only to the font awesome icon, but if I set <code>padding-top:10px</code> or <code>margin-top:10px</code> to the <code>i</code> element, it also adds padding to the text before it.</p>
  
  <p>Can someone help?</p>
  
  <p><a href="https://jsfiddle.net/pr89yq7n/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>i {
    font-size: 30px;
    padding-top: 10px;
  }
  .block {
    background-color: #ccc;
    padding: 10px;
    max-width: 400px;
    text-align: center;
  }
  .block-number {
    background-color: #000;
    color: #fff;
    padding: 10px;
    display: inline-block;
    font-size: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"&gt;
  &lt;div class="block"&gt;
    &lt;div class="block-number"&gt;2 to 4&lt;/div&gt;
    &lt;i class="fa fa-large fa-camera-retro"&gt;&lt;/i&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>