title: How to align fontawesome icon to the middle of a line (already tried the existing solutions)
body: <p>i would like you to help me get this working:</p>
  
  <p>html code:</p>
  
  <pre><code>        &lt;div class="mainMenu"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Reviews &lt;i class="fa fa-sort-desc"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/"&gt;News&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Videos &lt;i class="fa fa-sort-desc"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Forums&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>css code:</p>
  
  <pre><code>.mainMenu {
      overflow: hidden;
      float: right;
  }
  
  .mainMenu ul {
      overflow: hidden;
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  .mainMenu li {
      float: left;
  }
  
  .mainMenu li a {
      line-height: 65px;
      padding: 0 10px;
      margin-left: 10px;
  }
  </code></pre>
  
  <p>here's a link to a jsfiddle:
  <a href="http://jsfiddle.net/shock/r5rd3v86/" rel="nofollow">http://jsfiddle.net/shock/r5rd3v86/</a></p>