如何以一种不错的方式为facebook字体超赞图标着色？

Question

我想给字体真棒的Facebook图标上色。如果我这样做background-color：

body {
  font-size: 5em;
  background: #555
}

.fa-facebook-square {
  color: blue;
  background-color: #fff;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-facebook-square"></i>

它在边缘周围增加了白色，并且看起来不太好。是否有一个简单的解决方案，以一种很好的方式将图标中的“ f”仅着色（以便边缘周围的颜色保持透明）？

谢谢

Answer 1

图标仅由“ f”周围的部分，“ f”本身和边缘周围的部分组成，是透明的。因此，您仅需在“ f”下方创建一个白色部分。

这是可能的的组合linear-gradient，background-size和background-position。使用渐变，您可以创建一个白色矩形，您可以对其进行缩放和定位，使其仅位于“ f”下方。

通过使用相对单位（%），您的白色背景矩形会以相应的字体大小缩放。

body {
  font-size: 5em;
  background: #000
}

.fa-facebook-square {
  color: #3b5998;
  background-image: linear-gradient( to bottom, transparent 20%, white 20%, white 93%, transparent 93% );
  background-size: 55%;
  background-position: 70% 0;
  background-repeat: no-repeat;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-facebook-square"></i>