Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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=
                    crossorigin="anonymous">
            </script>
            <style>
                .center {
                    text-align: center;
                    width: 100%;
                }
            </style>
        </head>
        <body>
            <center>
                <h1 style="color: green;">
                  GeeksforGeeks
                </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=
                crossorigin="anonymous">
        </script>
        <style>
        .center {
            text-align:center;
            width:100%;
        }
        </style>
    </head>
        <body>
            <center>
                <h1 style="color: green;">
                  GeeksforGeeks
                </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=
                crossorigin="anonymous">
        </script>
    </head>
        <body>
            <center>
                <h1 style="color: green;">
                  GeeksforGeeks
                </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:



Last Updated : 09 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads