How to center Font Awesome icons horizontally?
CssFont AwesomeCss Problem Overview
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;
}
I also tried to set text-align:center !important;
but doesn't work. What did I do wrong?
Css Solutions
Solution 1 - Css
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 - Css
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;
}
Solution 3 - Css
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 - Css
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 - Css
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/
Solution 6 - Css
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 class="fa fa-pencil fa-fw" aria-hidden="true"></i>
Solution 7 - Css
If your icons are in an icon stack you can use the following code:
.icon-stack{ margin: auto; display: block; }
Solution 8 - Css
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.
Solution 9 - Css
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 class="fas fa-file-upload" style="margin: 3px;">
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.