title: Position icons in the div
body: <p>Im trying to position the icons in the left and right of div.</p>
  
  <p>But Its not working as you can see in my fiddle: <a href="http://jsfiddle.net/L9rwhuor/2/" rel="nofollow">http://jsfiddle.net/L9rwhuor/2/</a></p>
  
  <p>The left icon is not at the center in vertical terms, and the right icon is in the bottom right not at the center.</p>
  
  <p>Do you know why is not working properly?</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="box-left"&gt;
          &lt;div class="box-left-up"&gt;
              &lt;h2&gt;Test&lt;/h2&gt;
              &lt;div class="text"&gt;
                  &lt;i class="fa fa-chevron-circle-left" style="float:left; margin-top:15px;"&gt;&lt;/i&gt;
                  &lt;p&gt;test 1&lt;/p&gt;
                  &lt;p&gt;test 2&lt;/p&gt;
                  &lt;p&gt;test 2&lt;/p&gt;
                  &lt;p&gt;test 2&lt;/p&gt;
                  &lt;i class="fa fa-chevron-circle-right" style="clear:both;float:right; margin-top:15px"&gt;&lt;/i&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
  
  }
  h1 {
      text-align: center;
  }
  
  #container {
      margin: 0 auto;
      width: 960px; 
  }
  
  #container .text{
      text-align: center;
  }
  
  #container h2{
      text-align: center;
      padding: 10px;
      border-bottom: 2px solid #444;
  }
  #container .box-left{
      float: left;
      width:  480px;
      background: green;
  }
  </code></pre>