5

I tried the below code to render whatsapp icon using font awesome 5:

<i style="background-color: #25d366; color: white;" class="fab fa-whatsapp "></i>

But it looks like this:

enter image description here

What I want is to make it look like whatsapp icon that appears in Android phones i.e without the square green background. How to achieve this?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
ace
  • 11,526
  • 39
  • 113
  • 193

2 Answers2

10

You can try to color the background with gradient:

.fa-whatsapp  {
  color:#fff;
  background:
   linear-gradient(#25d366,#25d366) 14% 84%/16% 16% no-repeat,
   radial-gradient(#25d366 60%,transparent 0);
}
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
<i class="fab fa-whatsapp fa-7x"></i> 
<i class="fab fa-whatsapp fa-5x"></i>
<i class="fab fa-whatsapp fa-2x"></i>

With the CSS version:

.fa-whatsapp  {
  color:#fff;
  background:
   linear-gradient(#25d366,#25d366) 14% 84%/16% 16% no-repeat,
   radial-gradient(#25d366 58%,transparent 0);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" >
<i class="fab fa-whatsapp fa-7x"></i>
<i class="fab fa-whatsapp fa-5x"></i>
<i class="fab fa-whatsapp fa-2x"></i>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
2

Try this:

<i class="fab fa-whatsapp-square"></i>

because I use this format, but I hope its working

tomerpacific
  • 4,704
  • 13
  • 34
  • 52
FibmanArts
  • 21
  • 1