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

Solution 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/

Solution 3:

Give a class to your cell containing the icon

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

and then

.icon{
    text-align: center;
}

Solution 4:

i solved my problem with this:

<div class="d-flex justify-content-center"></div>

im using bootstrap with font awesome icons.

if you want to know more acess the link below: https://getbootstrap.com/docs/4.0/utilities/flex/

Solution 5:

OP you can use attribute selectors to get the result you desire. Here is the extra code you add

tr td i[class*="icon"] {
    display: block;
    height: 100%;
    width: 100%;
    margin: auto;
}

Here is the updated jsFiddle http://jsfiddle.net/kB6Ju/5/