字体令人讨厌的背景色

Question

当使用辉煌的字体时，我如何使图标不透明-例如，如果我想使用http://fortawesome.github.io/Font-Awesome/icon/chevron-circle-up/，但在黑圈内没有“向上箭头”是透明的，但坚实的颜色(白色)？

谢谢!

Answer 1

更新:正如泽维尔在下面指出的那样，字体-超赞有堆叠图标，它可以让你在图标后面放置一个圆圈而不用黑客攻击。本质上，你可以在他们的fa-circle图标上面堆叠任何你想要的图标。然后，您可以独立于图标的圆圈样式，并将其更改为您想要的任何颜色。

下面是一个基于他们站点代码的示例：

​

.fa-circle {
  color: black;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>

<span class="fa-stack" style="vertical-align: top;">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-chevron-up fa-stack-1x fa-inverse"></i>
</span>

​

原始答案:不幸的是，整个图标被认为是页面上的一个“字符”，因此，您无法控制它。您可以简单地设置一个" color“属性来将字符/图标的颜色设置为您想要的颜色。

现在，这是有可能的创造性黑客。由于字符的中间是透明的，您可以在字符后面设置一个彩色背景，这样做可以使中间看起来是不同的颜色：

    <i class="fa fa-chevron-circle-up"></i>

然后在CSS中：

.fa-chevron-circle-up {
  background: yellow;
  border-radius: 50%;
  height: 1em;
  width: 1em;
}

如果背景圆圈抵消了图标，您可以使用line-height修复它。

Answer 2

您可以将fa-堆栈与另一个下方的fa-循环图标一起使用，以便更好地控制边框中的像素：

<span class="fa-stack">
    <i class="fa fa-circle fa-stack-1x icon-a"></i>
    <i class="fa fa-times-circle fa-stack-1x icon-b"></i>
</span>

通过以下方式：

.icon-a {
    color: #FFF;
    font-size: 0.9em;
}
.icon-b {
    color: #000;
}

Answer 3

我还有一项针对那些仍然感兴趣的人的黑客：

<i class="fa fa-chevron-circle-up fa_with_bg"></i>

和css：

.fa_with_bg{
    position: relative;
}

.fa_with_bg::after{
    position: absolute;
    content: '';
    background: #fff;
    z-index: -1;
    top: 10px;
    left: 3px;
    width: 35px;
    height: 33px;
}

只需将fa_with_bg类添加到其中即可。

*您可能需要使用top、left、width和height属性。