screen_rotation
Copied to Clipboard
<!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>