title: Align text with new line in the middle of icon
body: <p>There is an icon with a text in front of it. I can align the text in the middle of icon by using <code>style="vertical-align: middle;"</code> </p>
  
  <p>So below works fine:</p>
  
  <pre><code>&lt;i class="fa fa-arrows-alt fa-5x" style="vertical-align: middle;"&gt;&lt;/i&gt; a Big Arrow.
  </code></pre>
  
  <p>The problem is when we add a <code>&lt;br&gt;</code> the alignment is not work any more ( As the icon is simple character)</p>
  
  <pre><code>&lt;i class="fa fa-arrows-alt fa-5x" style="vertical-align: middle;"&gt;&lt;/i&gt; a Big Arrow &lt;/br&gt; I mean very Big!
  </code></pre>
  
  <p>Please see <a href="http://jsfiddle.net/tQYTB/1/" rel="nofollow">http://jsfiddle.net/tQYTB/1/</a></p>
  
  <p>Can you tell me what is the best solution for it!</p>