如何以一种不错的方式为facebook字体超赞图标着色？ [英] How to color facebook font-awesome icon in a nice way?

问题描述

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

I would like to color 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>

边缘，看起来不太好。是否有一种简单的解决方案，可以以一种简单易用的方式仅对图标中的 f进行着色（以使边缘周围的颜色保持透明）？

It adds white around the edges and it doesn't look good. Is there a simple solution to color only the "f" in the icon in a nice and simple way (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-gradient ， background-size 和< a href = https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position rel = noreferrer> 背景位置 。通过渐变，您可以创建一个白色矩形，可以缩放和定位它，使其仅位于 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字体超赞图标着色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！