title: How to vertically align text with icon font pseudo element
body: <p>I am trying to vertically align font icons. I have tried "vertical-align: middle" but I always get a little align difference. The following example has 2 different ways to use the icons and they are not aligned correctly.</p>
  
  <p>An example on Jsfiddle:
  <a href="https://jsfiddle.net/crphowLg/7/" rel="nofollow">https://jsfiddle.net/crphowLg/7/</a></p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css"&gt;
  &lt;style&gt;
  div {
      font-size: 50px;
      font-family: helvetica,arial,sans-serif;
      text-transform: uppercase;
      background: yellow;
  }
  .cart {
      margin-top: 20px;
  }
  .cart:before {
      font-family: "fanatic-icons" !important;
      font-weight: normal;
      content: "b";
      margin-right: 5px;
      vertical-align: middle;
      text-transform: none;
  }
  &lt;/style&gt;
  
  &lt;div&gt;
  &lt;span class="icon icon-shopping-cart"&gt;&lt;/span&gt;
      Shopping Cart
  &lt;/div&gt;
  
  &lt;div class="cart"&gt;
      Shopping Cart
  &lt;/div&gt;
  </code></pre>
  
  <p>Thank you.</p>