title: Add font awesome icon in middle of horizontal line
body: <p>I am trying to draw a horizontal line for about 40% of the width, then show a font awesome icon and then the line again for the remaining 40%. The following shows what I have so far. But you can see <a href="https://jsfiddle.net/hyo0ezeo/" rel="nofollow">https://jsfiddle.net/hyo0ezeo/</a>, it isn't anywhere close to what I describe. Would someone please point out the correct way to do this?</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>h2 {
    width: 30%; 
    text-align: center; 
    border-bottom: 1px solid red; 
    line-height: 0.1em;
    margin: 10px 0 ; 
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;
    &lt;h2&gt;
      &lt;span class="fa fa-arrows-alt" aria-hidden="true" style="margin:10px 0"&gt;&lt;/span&gt;
    &lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>