title: icon font: use bigger font-size (inline-element) without affecting line-height
body: <p>i use an icon-font like…</p>
  
  <pre><code>&lt;p&gt; Bla bla bla &lt;i data-icon="a"&gt;&lt;/i&gt;
  &lt;br/&gt; Second Line Bla bla bla bla bla &lt;/p&gt;
  </code></pre>
  
  <p>because i need a bigger font-size for the icon i use css to do so…</p>
  
  <pre><code>p i{
    font-size: 20px;
    position: relative;
    top: -3px; /* to adjust the position */
  }
  </code></pre>
  
  <p>but now the gap to the second line respectively the line height is bigger. i want that the i-inline-element is not influencing the line-height. 
  i hope it is clear what i want to achieve. how can i do it?</p>
  
  <p>i tried to add to the css </p>
  
  <pre><code>line-height: 0px
  </code></pre>
  
  <p>or something like this. but it does not work…</p>
  
  <p>fiddle <a href="http://jsfiddle.net/THnNe/1" rel="nofollow">http://jsfiddle.net/THnNe/1</a></p>