making sticky whatsapp icon on left side for my website - html

Question

I have an website and wanted to add a whatsapp icon to the left side of my screen as shown in the image below:
Down below the html code is for adding the whatsapp icon
<a class="whats-app" href="#" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>
and this is the css styling I have used
.whats-app {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 15px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
}
.my-float {
margin-top: 16px;
}
From the above css and html this is the outcome: . In css I changed left:15px from right:15px but still the second image.
Can I know where it went wrong?
Though I have commented the above css then also it is showing the whats app icon and css properties in the console

Answer 1

Try with this CSS.
.whats-app {
position: fixed;
width: 50px;
height: 50px;
bottom: 40px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 3px 4px 3px #999;
left: 15px;
z-index: 100;
}
.my-float {
margin-top: 10px;
}

Answer 2

try this.. here i unset the right value
css
.whats-app {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
left:0;
right:unset;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
}
.my-float {
margin-top: 16px;
}

Answer 3

You needs to add left: 0 or left: (pixels you want) in .whats-app css. and needs to remove right: 15px from css
Try this hope it will help you.
.whats-app {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
left: 15px;
}
.my-float {
margin-top: 16px;
}
<a class="whats-app" href="#" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>

Answer 4

You can do something like the below code.
.icon-bar {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.icon-bar a {
display: block;
padding: 16px;
color: #448edd;
border-radius: 50px;
}
.whatsapp {
background: #53d365;
color: #448edd;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
<i class="fa fa-whatsapp"></i>
</div>