html - 如何更改 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 Logo 的蓝色“背景”边缘周围添加了白色，这是我不想要的。

是否有一种简单的解决方案，只为图标中的“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>