How to center Font Awesome icons horizontally

Question

I have a table with a Font Awesome icon and I want to align text left and center icons  I tried with centering  lt i gt  but doesn t work   HTML    lt td gt  lt i class  icon-ok  gt  lt  i gt  lt  td gt    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

User · Answer

Use text-align  center  on the block container of the icon  the  lt td gt   - text-align doesn t apply to inline elements  only block containers   td       text-align  center      http   jsfiddle net kB6Ju 2

User · Answer

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    lt i class  fa fa-pencil fa-fw  aria-hidden  true  gt  lt  i gt

User · Answer

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

User · Answer

Give a class to your cell containing the icon   lt td class  icon  gt  lt i class  icon-ok  gt  lt  i gt  lt  td gt    and then   icon      text-align  center

User · Answer

If your icons are in an icon stack you can use the following code     icon-stack  margin  auto  display  block

User · Answer

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

User · Answer

i solved my problem with this    lt div class  d-flex justify-content-center  gt  lt  div gt    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

User · Answer

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    lt td gt  lt span gt consectetur lt  span gt  lt  td gt   lt td gt  lt span gt adipiscing lt  span gt  lt  td gt   lt td gt  lt span gt elit lt  span gt  lt  td gt    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

[css] How to center Font Awesome icons horizontally?

Examples related to css

Examples related to font-awesome