How to target all Font Awesome icons and align them center?️‍🔥

Font Awesome is a great toolkit for developers to get icons based on CSS and LESS. There is other icons pack on the internet, but Font Awesome is more popular in the developer community. It has a wide collection of icons that are free to use.

The most preferred way to center Font Awesome Icons is to assign a center class to each <i> tag. Setting width to 100%, let’s each icon cover 100% area horizontally. Also text-align then centers the icon accordingly to the width being used.

If we want to target our Font Awesome icons on our window, and align them to center by using the following methods

Example 1: Adding a custom class in all <i> tag. This method can be used for all Font Awesome Icons on a page.
Program:

<!DOCTYPE html> 
<html> 
    <head> 
        <script src= 
"https://kit.fontawesome.com/a6e2755b4d.js" 
                crossorigin="anonymous"> 
        </script> 
        <style> 
            .center { 
                text-align: center; 
                width: 100%; 
            } 
        </style> 
    </head> 
    <body> 
        <center> 
            <h1 style="color: green;"> 
              w3wiki 
            </h1> 
            <b> 
                Centered align icons 
            </b> 
        </center> 
        <br> 
        <i class="fas fa-fire fa-3x center"></i> 
        <i class="fas fa-water fa-3x center"></i> 
        <i class="fas fa-disease fa-3x center"></i> 
    </body> 
</html> 

Output:

Example 2: Adding a custom class in a div tag. This method can only be used for a section of website dedicated to Font Awesome Icons.
Program:

<!DOCTYPE html> 
<html> 
    <head> 
    <script src= 
"https://kit.fontawesome.com/a6e2755b4d.js" 
            crossorigin="anonymous"> 
    </script> 
    <style> 
    .center { 
        text-align:center; 
        width:100%; 
    } 
    </style> 
</head> 
    <body> 
        <center> 
            <h1 style="color: green;"> 
              w3wiki 
            </h1> 
            <b> 
                Centered align icons 
            </b> 
        </center> 
        <br> 
        <div class="center"> 
            <i class="fas fa-fire fa-3x"></i> 
            <br> 
            <i class="fas fa-water fa-3x"></i> 
            <br> 
            <i class="fas fa-disease fa-3x"></i> 
        </div> 
    </body> 
</html> 
             

Output:

Example 3: Adding a HTML <center> tag for a particular section. This method can only be used for a section of a website dedicated to Font Awesome Icons.

<!DOCTYPE html> 
<html> 
    <head> 
    <script src= 
"https://kit.fontawesome.com/a6e2755b4d.js" 
            crossorigin="anonymous"> 
    </script> 
</head> 
    <body> 
        <center> 
            <h1 style="color: green;"> 
              w3wiki 
            </h1> 
            <b> 
                Centered align icons 
            </b> 
            <br> 
            <i class="fas fa-fire fa-3x"></i> 
            <br> 
            <i class="fas fa-water fa-3x"></i> 
            <br> 
            <i class="fas fa-disease fa-3x"></i> 
        </center> 
    </body> 
</html> 

Output: