如何更改 Facebook Font Awesome 图标的颜色? [英] How do I change the color of the Facebook Font Awesome icon?

问题描述

我想更改 Font Awesome Facebook 图标的颜色.如果我使用 background-color:

I would like to change the color of the Font Awesome Facebook icon. If I do it with 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 徽标的蓝色背景"边缘添加了白色，这是我不想要的.

It adds white around the edges of the blue 'background' of the Facebook logo, which I don't want.

是否有一个简单的解决方案来只给f"上色?在图标中，以便边缘周围的颜色保持透明?

Is there a simple solution to color only the "f" in the icon so that the color around the edges stays transparent?

推荐答案

图标仅由'f'周围的部分组成，'f'本身和边缘部分是透明的.因此，您必须仅在f"下创建一个白色部分.

The icon only consists of the part around the 'f', the 'f' itself and the part around the edges are transparent. Therefore you have to create a white part only under the 'f'.

可以结合 linear-渐变、背景-大小 和 background-位置.使用渐变创建一个白色矩形，您可以缩放和定位它以仅位于f"下方.

It's possible with a combination of a linear-gradient, background-size and background-position. With the gradient you create a white rectangle, that you can scale and position to only lay under the 'f'.

通过使用相对单位 (%)，您的白色背景矩形会根据相应的字体大小进行缩放.

By using a relative unit (%), your white background rectangle scales with the corresponding font size.

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>

这篇关于如何更改 Facebook Font Awesome 图标的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！