Font Awesome 5 whatsapp 图标 CSS 样式答案

【问题标题】：Font Awesome 5 whatsapp icon CSS styleFont Awesome 5 whatsapp 图标 CSS 样式
【发布时间】：2018-04-18 15:20:20
【问题描述】：

我尝试使用以下代码使用 font awesome 5 呈现 whatsapp 图标：

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

但它看起来像这样：

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

【问题讨论】：

标签： css font-awesome font-awesome-5

【解决方案1】：

你可以尝试用渐变给背景上色：

.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>

使用 CSS 版本：

.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>

【讨论】：

【解决方案2】：

试试这个：

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

因为我使用这种格式，但我希望它可以工作

【讨论】：