How to center Font Awesome icons horizontally?

Question

I have a table with a Font Awesome icon and I want to align text left and center icons. I tried with centering <i> but doesn't work:

HTML:

<td><i class="icon-ok"></i></td> 

CSS:

td, th {     text-align: left; } td i {     text-align:center; } 

jsFiddle

I also tried to set text-align:center !important; but doesn't work. What did I do wrong?

Answer 1

Add your own flavour of the font awesome style

[class^="icon-"], [class*=" icon-"] {     display: inline-block;     width: 100%; } 

which along with your

td i {     text-align:center; } 

should center just the icons.

Answer 2

Use text-align: center; on the block container of the icon (the <td>) - text-align doesn't apply to inline elements, only block containers:

td {     text-align: center; } 

http://jsfiddle.net/kB6Ju/2/