如何更改 Facebook Font Awesome 图标的颜色？

Question

我想更改 Font Awesome 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>

它在 Facebook 徽标的蓝色“背景”边缘周围添加了白色，这是我不想要的。

是否有一个简单的解决方案来仅对图标中的“f”着色，以便边缘周围的颜色保持透明？

原文由 sir-haver 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 andreas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

以下是基本图标默认显示结果：

如果您使用：

 background-color: white !important;

然后你得到这个：

如果您然后使用：

 background-image: linear-gradient( to bottom, transparent 20%, white 20%, white 93%, transparent 93% );
background-size: 84%;
background-position: 60% 0;
background-repeat: no-repeat;

那么结果是：

尝试使用背景大小来适合您的图标。

原文由 james ace 发布，翻译遵循 CC BY-SA 4.0 许可协议