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 centres 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>
                 

    chevron_right

    
    

    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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

full-stack-img




My Personal Notes arrow_drop_up

I am an Engineering Undergraduate based in Delhi, India and majoring in Information Technology A passionate Web Developer, love to contribute to open-source projects, eager to expand my skills and learn as I move forward

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.