title: How to center Font Awesome icons horizontally?
body: <p>I have a table with a <a href="http://fortawesome.github.io/Font-Awesome/" rel="noreferrer"><strong>Font Awesome</strong></a> icon and I want to align text left and center icons.
  I tried with centering <code>&lt;i&gt;</code> but doesn't work:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;td&gt;&lt;i class="icon-ok"&gt;&lt;/i&gt;&lt;/td&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>td, th {
      text-align: left;
  }
  td i {
      text-align:center;
  }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/kB6Ju/1/" rel="noreferrer">jsFiddle</a></strong></p>
  
  <p>I also tried to set <code>text-align:center !important;</code> but doesn't work. What did I do wrong?</p>