cssfont-awesome

How to center Font Awesome icons horizontally?

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?

Solution

  • 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.