How to center Font Awesome icons horizontally?

Give a class to your cell containing the icon

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

and then

.icon{
    text-align: center;
}

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/

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.

Related