title: Add font awesome icon before heading?
body: <p>I am trying to design my own homepage and using this <a href="https://html5up.net/read-only" rel="nofollow noreferrer">Read-Only</a> template.</p>
  
  <p>I want to customize my headings a little bit so it would have an icon before.</p>
  
  <p>Here is my code
        
  
  <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>.icon {
      text-decoration: none;
      text-size: 1em;
      display: inline;
      margin: 0 0 1.5em 0;
      padding: 0.35em 0 0 3.5em;
      position: relative;
      vertical-align: baseline;
      height: 0.5em;
      width: 48%;
  }
  
  .icon:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      text-transform: none !important;
      background: #4acaa8;
      border-radius: 100%;
      color: #ffffff;
      display: inline-block;
      height: 2.5em;
      left: 0;
      line-height: 2.5em;
      position: absolute;
      text-align: center;
      top: 0;
      width: 2.5em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;i class="icon fa-rss"&gt;&lt;/span&gt; &lt;/i&gt; &lt;h3 style="display: inline"&gt;First Blog&lt;/h3&gt; 
  &lt;p&gt;This is the first blog&lt;p&gt;
  
  &lt;h3&gt;Second Blog&lt;h3&gt;
  &lt;p&gt;This is the second blog&lt;p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But, the icon and the first heading seem not vertically aligned. Also, how to adjust the size of the icon?</p>
  
  <p>Any help would be highly appreciated!</p>