我想更改 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”进行着色，以便边缘周围的颜色保持透明？
图标仅由“f”周围的部分组成，“f”本身和边缘周围的部分是透明的。因此，您必须仅在“f”下方创建白色部分。
可以结合使用linear-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient, background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size and background-position https://developer.mozilla.org/en-US/docs/Web/CSS/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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
