字体真棒5 whatsapp图标CSS样式

问题描述：

我尝试了以下代码，使用超棒5字体呈现whatsapp图标:

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>

但它看起来像这样:

我想要使它看起来像出现在Android手机中的whatsapp图标，即没有方形绿色背景.如何实现呢?

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?

答

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

You can try to color the background with gradient:

.fa-whatsapp  {
  color:#fff;
  background:
  linear-gradient(#25d366,#25d366)10px 84%/10px 15px 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>

使用CSS版本:

.fa-whatsapp  {
  color:#fff;
  background:
  linear-gradient(#25d366,#25d366)10px 84%/15px 15px no-repeat,
  radial-gradient(#25d366 59%,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>

字体真棒5 whatsapp图标CSS样式

相关推荐