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></i></td>

CSS:

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

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

9 Answers

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.

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; }

Give a class to your cell containing the icon

<td><i></i></td>

and then

.icon{ text-align: center; }

i solved my problem with this:

<div></div>

im using bootstrap with font awesome icons.

if you want to know more acess the link below:

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

It's a really old topic but as it still comes up top in search results:

Nowadays you can add additional class fa-fw to set it fixed width.

Example:

<i aria-hidden="true"></i>

If your icons are in an icon stack you can use the following code:

.icon-stack{ margin: auto; display: block; }

Since you don't want to add a class to cells containing an icon, how about this...

Wrap the contents of each non-icon td in a span:

<td><span>consectetur</span></td> <td><span>adipiscing</span></td> <td><span>elit</span></td>

And use this CSS:

td { text-align: center; } td span { text-align: left; display: block; }

I wouldn't normally post an answer in this situation, but this seems too long for a comment.

You can use the property margin to solve this issue. In my case setting margin to 3 pixels solved the problem. This is the example:

<i>

Obviously, 3 pixels are not necessarily enough in your case, so I suggest you do some tests.

NOTE: I'm using this inside a flex element so I'm not sure if in a table it's same.