字体神器背景颜色

Question

当使用优秀的 Font Awesome 时，如何使图标不透明 - 比如我想使用 http://fortawesome.github.io/Font-Awesome/icon/chevron-circle-up/，但不希望黑色圆圈中的“向上箭头”是透明的，而是实心颜色（白色）？

谢谢！

- John Anderson

Answer 1

更新： 正如xavier在下面指出的那样，font-awesome有堆叠图标，可以让您在不使用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>

很不幸，整个图标在页面上被视为一个单独的“字符”，因此您无法对其进行精细控制。 您可以仅设置一个“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 属性来修复它。

- Kyle Goode

---

在任何带有黑色圆圈的东西上，这是一个在中间获得背景颜色的绝佳方式。 - Doyle Lewis

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

- xavier bs

---

这对我很有效，看起来是一个非黑客解决方案。 - Andy Mehalick

你的 CSS 规则为什么在属性名和属性值周围加了引号？ - j08691

我不记得了，可能是粘贴时出错了，请将其删除。 - xavier bs

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%);
}

你可以更改你想要的颜色或选择器，但这会防止背景色覆盖圆形箭头或任何类似的东西。

希望这能帮助到某些人，因为其他答案可能不适用于扩展性。

- Mike

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 属性进行微调。

- OmerSch

---

对我没有起作用，为了让它起作用，我稍微更改了您的CSS：我给::before阴影元素添加了position: relative; z-index: 1;，并给::after元素添加了一个z-index值为0。 - Jacob van Lingen

这对我很有用，特别是当我想为我的 chevron-circle 图标添加 border-radius 时。 - surfbird0713

Answer 5

我刚刚在字体Awesome链接中使用了一个样式，像这样...

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

- user3319732

Answer 6

白色背景下，fa-plus-circle字体大小从1像素到150像素。

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

- SoEzPz