【问题标题】：Font awesome background color is overflown [duplicate]字体真棒背景颜色溢出[重复]
【发布时间】：2019-12-22 11:52:31
【问题描述】：

我想为一个 fontawesome 图标设置背景颜色：

.vert {
      background: springgreen;
    }
...
return '<i class="fa fa-circle-thin vert"></i>';

在运行时我得到这个：

那么如何只填充圆圈的内部？

【问题讨论】：

您使用的是哪个版本的 font-awesome。
现在是版本5.8.1
检查这个以回答您的问题：jsfiddle.net/je3zxr9k
即使您使用的是版本 5，颜色属性也应该像我在答案中所说的那样工作。
我试过但不行；我猜有 smthg 与 Bootstrap 交互！

标签： css font-awesome font-awesome-4

【解决方案1】：

字体真棒V5

此示例准确描述了您正在使用的版本。

.vert {
color: springgreen;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<span class="fa-stack">
  <i class="fas fa-circle vert fa-stack-2x"></i>
  <i class="far fa-circle fa-stack-2x"></i>
</span>

这里是 codepen，用于描述您的担忧“由于与引导程序交互而出现问题”。

【讨论】：

【解决方案2】：

您可以使用color: springgreen; 更改字体真棒图标的颜色

此外，您还需要使用像 https://fontawesome.com/icons/circle?style=solid 这样的实心图标

.vert {
      color: springgreen;
    }
...
return '<i class="fas fa-circle vert"></i>';

【讨论】：

@pheromix 这不是问题。如果您仍在使用版本 4，则可以使用 fontawesome.com/v4.7.0/icon/circle。如果您使用的是版本 4，请记住使用 fa 而不是 fas。

【解决方案3】：

您可以使用stacked icons。

.vert {
  color: springgreen;
}

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


<span class="fa-stack">
  <i class="fas fa-circle vert fa-stack-2x"></i>
  <i class="far fa-circle  fa-stack-2x"></i>
</span>

在 Font Awesome 5 中使用图层

此功能需要您使用 SVG + JS 版本的 Font Awesome 5。

.vert {
  color: greenyellow;
}

<script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" data-search-pseudo-elements></script>

<div class="fa-4x">
  <span class="fa-layers fa-fw">
    <i class="fas fa-circle vert" ></i>
    <i class="far fa-circle"></i>
  </span>
</div>

【讨论】：

【解决方案4】：

如果你需要用春天的绿色填充整个图标。然后使用边界半径。示例：-

.vert {
      color: springgreen;
    }

或者，如果您只想在边框上着色。您可以使用上述答案中描述的颜色属性。

【讨论】：