Html 如何以一种好的方式给facebook字体图标上色？

我想把字体涂成很棒的facebook图标。如果我使用

背景色

：

正文{
字号：5em；
背景：#555
}
.fa脸谱广场{
颜色：蓝色；
背景色：#fff；
}

---

如果您不想要白色轮廓，我会删除背景色标签。看看这个

---

图标仅由“f”周围的部分组成，“f”本身和边缘周围的部分是透明的。因此，您必须仅在“f”下创建白色零件

这是可能的，与一个，和的组合。使用渐变创建一个白色矩形，可以缩放和定位该矩形，使其仅位于“f”下方

通过使用相对单位（

%

），白色背景矩形将按相应的字体大小缩放

正文{
字号：5em；
背景：#000
}
.fa脸谱广场{
颜色：#3b5998；
背景图像：线性渐变（至底部，透明20%，白色20%，白色93%，透明93%）；
背景大小：55%；
背景位置：70%0；
背景重复：无重复；
}

---

您可以使用此SVG，它不会创建这样的边

正文{
背景色：黑色；
}

.st0{fill:#FFFFFF；}

它应该完成这项工作，至少在Angular+SVG组合中是这样。将鼠标悬停在

fab fa behance

图标上，可更改颜色的SCSS代码

&:hover {
    svg {
      &.fa-facebook-f {
        path {
          transition: 1s;
          fill: #3b5998;
        }
      }
    }
 }

---

请更新您的问题，不仅是facebook图标，但所有的字体可怕的图标

i、 e

如何设置字体图标的背景样式

这是我以前的经历

然后我用

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;

结果如何

使用背景大小进行扩展，以适合您的图标

---

快乐编码请明确定义你所说的“美好和简单”是什么意思。这对你来说意味着什么，可能对每个人来说都不一样，也不清楚。寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以一种简单的方式。谢谢你的回答，我忘了提到facebook图标被放置在一个灰色的容器中，这就是为什么应用于图标的白色背景色会产生白色边缘。我确实想要这个背景，因为否则字母“f”是灰色的。也许解决方案是为facebook图标制作一个白色容器？我只是希望有一个优雅的solution@sir-我误解了你的问题。安德烈亚斯的答案似乎就是你想要的。非常感谢伟大的解决方案！不客气，很高兴我能帮上忙！如果这个答案是你想要的，我会很感激你的接受：）嘿，安德烈，我刚刚接受了，很抱歉我错过了你的评论

&:hover {
    svg {
      &.fa-facebook-f {
        path {
          transition: 1s;
          fill: #3b5998;
        }
      }
    }
 }

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;