字体真棒背景颜色

Question

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

谢谢!

Answer 1

更新: 正如xavier在下面指出的那样,font-awesome有Stacked Icons,它可以让你在不使用hack的情况下在一个图标后面放一个圆圈.基本上,您可以在图标上叠加您想要的任何fa-circle图标.然后,您可以独立于图标设置圆形样式,并将其更改为您想要的任何颜色.

以下是基于其网站代码的示例:

.fa-circle {
  color: black;
}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.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>

原始答案: 不幸的是,整个图标在页面上被视为单个"字符",因此,您没有对它进行那种细微的控制.您只需设置一个"颜色"属性即可将字符/图标的颜色设置为您想要的颜色.

现在,有可能创造性的黑客攻击.由于角色的中间部分是透明的,因此您可以在角色后面设置彩色背景,通过执行以下操作使中间显示为不同的颜色:

    <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-stack和另一个下方的fa-circle图标来更好地控制边界处的像素:

<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

我发现的最简单的解决方案是只使用带有径向渐变的背景。HTML：

<i aria-hidden="true" class="fa fa-arrow-alt-circle-up fa-3x"></i>

CSS：

.fa{
    color: red; 
    background: radial-gradient(grey 50%, transparent 50%);
}

您可以更改您想要的颜色或选择器，但这将防止背景颜色越过圆形箭头或任何类似的东西。

希望这对某人有所帮助，因为其他一些答案不能很好地扩展。

Answer 4

对于仍然感兴趣的人,我还有另一个黑客:

<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属性.