Font Awesome 5 whatsapp图标CSS样式

Question

我尝试使用以下代码使用font awesome 5来渲染whatsapp图标：

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

但它看起来像这样：

我想要的是让它看起来像Android手机中出现的whatsapp图标，即没有方形绿色背景。怎么做到这一点？

Answer 1

您可以尝试使用渐变为背景着色：

＆＃13;

＆＃13;

.fa-whatsapp  {
  color:#fff;
  background:
  linear-gradient(#25d366,#25d366)10px 84%/10px 15px no-repeat,
  radial-gradient(#25d366 60%,transparent 0);
}

＆＃13;

<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
<i  class="fab fa-whatsapp fa-7x"></i>

＆＃13;

＆＃13;

＆＃13;

使用CSS版本：

＆＃13;

＆＃13;

.fa-whatsapp  {
  color:#fff;
  background:
  linear-gradient(#25d366,#25d366)10px 84%/15px 15px no-repeat,
  radial-gradient(#25d366 59%,transparent 0);
}

＆＃13;

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" >
<i  class="fab fa-whatsapp fa-7x"></i>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试一下：

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

因为我使用这种格式，但我希望它能起作用