Font Aweosme Facebook Square : Fab Fa Facebook Square, Fa Brands Fa Facebook Square

<!DOCTYPE html>
<html>

<body>
 <div class="container">
 <h1>Font Awesome Facebook Square HTML|CSS (Fa Brands fa-facebook-square) </h1>
 Facebook Sqaure icon with button:
 <a class="facebook-square-button" href="#"> Follow us on
 Facebook</a>
 
 Default Size: 
 Size 2xs: 
 Size xs : 
 Size sm :
 Size lg : 
 Size xl : 
 Size 2xl : 
 </div>
 <style>
 /* Style for the Google Play button */
 .facebook-square-button {
 background-color: #3b5998;
 /* Facebook blue */
 color: #fff;
 /* White text color */
 padding: 10px 15px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 font-size: 16px;
 text-decoration: none;
 }

.facebook-square-button i {
            margin-right: 5px;
        }

/* Add some hover effect */
        .facebook-square-button:hover {
           background-color: #32508e; /* Darker shade on hover */
        }

.container {
 margin: 0 auto;
 width: 600px;
 padding: 20px;
 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
 }
 </style>
</body>

</html>

 
<!DOCTYPE html>
<html>
​
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
​
<body>
    <div class="container">
        <h1>Font Awesome Facebook Square HTML|CSS (Fa Brands fa-facebook-square) </h1>
        <p>Facebook Sqaure icon with button:
            <a class="facebook-square-button" href="#"><i class="fa-brands fa-facebook-square"> </i> Follow us on
                Facebook</a>
        </p>
        <p>Default Size: <i class="fa-brands fa-facebook-square"></i></p>
        <p>Size 2xs: <i class="fa-brands fa-facebook-square fa-2xs"></i></p>
        <p>Size xs : <i class="fa-brands fa-facebook-square fa-xs"></i></p>
        <p>Size sm :<i class="fa-brands fa-facebook-square fa-sm"></i></p>
        <p>Size lg : <i class="fa-brands fa-facebook-square fa-lg"></i></p>
        <p>Size xl : <i class="fa-brands fa-facebook-square fa-xl"></i></p>
        <p>Size 2xl : <i class="fa-brands fa-facebook-square fa-2xl"></i></p>
    </div>
    <style>
        /* Style for the Google Play button */
        .facebook-square-button {
            background-color: #3b5998;
            /* Facebook blue */
            color: #fff;
            /* White text color */
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            text-decoration: none;
        }
​
        .facebook-square-button i {
            margin-right: 5px;
        }
​
        /* Add some hover effect */
        .facebook-square-button:hover {
           background-color: #32508e; /* Darker shade on hover */
        }
​
        .container {
            margin: 0 auto;
            width: 600px;
            padding: 20px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
        }
    </style>
</body>
​
</html>