字体真棒背景颜色

Question

当使用出色的 Font Awesome 时，如何使图标不透明 - 例如，如果我想使用 http://fortawesome.github.io/Font-Awesome/icon/chevron-circle-up/ 但黑色圆圈内的“向上箭头”不透明但纯色（白色）？

谢谢！

Answer 1

我只是在字体真棒链接中使用了这样的样式...

<i class="fa fa-ban icon" style="background:#8BAAAD"></i>

Answer 2

更新： 正如 xavier 在下面指出的，font-awesome 有Stacked Icons，它可以让你在图标后面放一个圆圈，而无需使用 hack。本质上，您可以将所需的任何图标堆叠在他们的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>

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

现在，虽然可以进行创意破解。由于字符的中间是透明的，您可以通过执行以下操作在字符后面设置彩色背景，使其看起来中间是不同的颜色：

    <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 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

对于 fa-plus-circle，白色背景的字体大小从 1px 缩放到 150px。

// Note: Change background color to match your criteria

// SCSS
.fa-bg-white {
  position: relative;

  &:before {
    position: relative;
    z-index: 1;
  }

  &:after {
    position: absolute;
    content: '';
    background: #FFF;
    border-radius: 50%;
    z-index: 0;
    top: 10%;
    left: 10%;
    width: 75%;
    height: 75%;
  }
}


// HTML
<i class="fa fa-plus-circle fa-bg-white"></i>

Answer 5

您可以将 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 6

我为仍然感兴趣的人准备了另一个技巧：

<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 属性进行一些尝试。