Font Awesome Facebook F : Fab Fa Facebook F, Fa Brands Fa Facebook F

<!DOCTYPE html>
<html>

<body>
    <div class="container">
        <h1>Font Awesome Facebook F HTML|CSS (Fa Brands fa-facebook-f) </h1>
        <p>Facebook F icon with button:
            <button class="facebook-f-button">
                Connect with Facebook <i class="fa-brands fa-facebook-f"></i>
            </button>
        </p>
        <p>Default Size: <i class="fa-brands fa-facebook-f"></i></p>
        <p>Size 2xs: <i class="fa-brands fa-facebook-f fa-2xs"></i></p>
        <p>Size xs : <i class="fa-brands fa-facebook-f fa-xs"></i></p>
        <p>Size sm :<i class="fa-brands fa-facebook-f fa-sm"></i></p>
        <p>Size lg : <i class="fa-brands fa-facebook-f fa-lg"></i></p>
        <p>Size xl : <i class="fa-brands fa-facebook-f fa-xl"></i></p>
        <p>Size 2xl : <i class="fa-brands fa-facebook-f fa-2xl"></i></p>
    </div>
    <style>
        .facebook-f-button {
            background-color: #1877f2;
            /* Facebook color */
            color: #fff;
            /* Text color */
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 20px;
            transition: background-color 0.3s;
        }

.facebook-f-button:hover {
            background-color: #0d5cb6;
            /* Darker Facebook color 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>