WhatsApp Logo/Icon Using HTML & CSS Code

Welcome to the CodeWithRandom blog. In This Article, We learn how to create a WhatsApp Logo. We use HTML & CSS Code for Creating WhatsApp Logo.

Hope you enjoy our blog so let's start with a basic HTML structure for the WhatsApp Logo.

Html Code For WhatsApp Logo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 
    <title>WhatsApp Logo</title>
    <link rel="stylesheet" href="style1.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>
<body>
  <div class="white">
      <div>
        <i class="fas fa-phone"></i>
      </div>
    </div>
</body>
</html>

There is all the HTML Code for the WhatsApp Logo. Now, you can see output without CSS. Then we write CSS Code for the WhatsApp Logo.

CSS Code For WhatsApp Logo

body{
    margin: 0;
    padding: 0;
    background: lightblue;
}
div{
    width: 70px;
    height: 70px;
    border-radius: 35px;
    background: #3AC371;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.white{
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #fff;
    box-shadow: 2px 2px 3px 2px rgba(0,0,0,.3);
}
.white::before{
    content: "";
    top: 65px;
    left: -15px;
    border-width: 20px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    position: absolute;
    transform: rotate(-50deg) rotateX(-55deg);
}
.white::after{
    content: "";
    top: 63px;
    left: -4px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent #3AC371 transparent transparent;
    position: absolute;
    transform: rotate(-51deg) rotateX(-50deg);
}
.fas{
    left: 17px;
    top: 18px;
    position: absolute;
    font-size: 35px;
    color: #fff;
    transform: rotate(90deg);
}

We have completed our CSS Code Section For WhatsApp Logo. Here is our final updated output with HTML And CSS Code.

We have completed our CSS Code Section. Here is our updated output with HTML & CSS. Hope you like the WhatsApp Logo, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you

This post teaches us to create a WhatsApp Logo using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki

code by - Md Aman