Font Awesome Wordpress : Fab Fa Wordpress, Fa Brands Fa Wordpress

<!DOCTYPE html>
<html>

<body>
 <div class="container">
 <h1>Fa Brands Fa Wordpress icon | HTML CSS </h1>
 Wordpress with Button: <a href="#" class="wordpress-button"> Click here
 for WordPress</a>
 Button with Wordpress Icon : <a href="#" class="circle-background wordpress-button"></a>
 Default Size: 
 Size 2xs: 
 Size xs : 
 Size sm :
 Size lg : 
 Size xl :

</div>
 <style>
 /* Style for the WordPress button */
 .wordpress-button {
 display: inline-block;
 padding: 10px 20px;
 background-color: #21759b;
 /* Adjust the color as needed */
 color: #ffffff;
 /* Adjust the text color as needed */
 text-decoration: none;
 border-radius: 5px;
 transition: background-color 0.3s ease-in-out;
 }

.wordpress-button:hover,
        .circle-background:hover {
            background-color: #145374;
            /* Adjust the hover color as needed */
        }

.circle-background {
            padding: 10px;
            border-radius: 50%;
        }

.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>Fa Brands Fa Wordpress icon | HTML CSS </h1>
        <p>Wordpress with Button: <a href="#" class="wordpress-button"><i class="fa-brands fa-wordpress"></i> Click here
                for WordPress</a></p>
        <p>Button with Wordpress Icon : <a href="#" class="circle-background wordpress-button"><i
                    class="fa-brands fa-wordpress fa-2x"></i></a></p>
        <p>Default Size: <i class="fa-brands fa-wordpress"></i></p>
        <p>Size 2xs: <i class="fa-brands fa-wordpress fa-2xs"></i></p>
        <p>Size xs : <i class="fa-brands fa-wordpress fa-xs"></i></p>
        <p>Size sm :<i class="fa-brands fa-wordpress fa-sm"></i></p>
        <p>Size lg : <i class="fa-brands fa-wordpress fa-lg"></i></p>
        <p>Size xl : <i class="fa-brands fa-wordpress fa-xl"></i></p>
​
​
    </div>
    <style>
        /* Style for the WordPress button */
        .wordpress-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #21759b;
            /* Adjust the color as needed */
            color: #ffffff;
            /* Adjust the text color as needed */
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease-in-out;
        }
​
        .wordpress-button:hover,
        .circle-background:hover {
            background-color: #145374;
            /* Adjust the hover color as needed */
        }
​
        .circle-background {
            padding: 10px;
            border-radius: 50%;
        }
​
​
        .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>