令人敬畏的5号字体：可以更改图标的背景颜色，使其不会在边框外出血吗？

Question

我想更改Font Awesome 5图标的Background-COLOR。不幸的是，当我指定背景颜色时，它会在图标的边界外流血。

以下是示例：

<i class="far fa-exclamation-triangle" style="color: #000; font-size: 5em; background-color: yellow;"></i>

我并不惊讶它会像这样，但这有可能吗？

谢谢您的帮助！

Answer 1

FontAwesome是一种字体，因此这类似于询问是否可以将常规字体设置为字母O的背景颜色（填充）。字体只有一种颜色。

但是，可以将FontAwesome字体导出到单个SVG图形（here）。如果使用这些字体而不是字体，则可以设置SVG的fill样式以获得所需的结果。如果SVG路径没有填充，您可以随时对其进行编辑。

Answer 2

我将此问题归功于非常有用的Font Awesome支持，并指示他们使用其内置的分层和功能转换来创建自定义图标。

  

注意：仅当您使用SVG + JS版的Font Awesome时，此解决方案才有效。

 <span class="fa-layers fa-fw fa-5x">
    <i class="fas fa-triangle" style="color: yellow;"></i>
    <i class="far fa-exclamation-triangle" style="color: black;"></i>
 </span

更多阅读和示例在这里：

https://codepen.io/fontawesome/pen/wxLQEL

https://fontawesome.com/how-to-use/on-the-web/styling/layering

https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms