Font Awesome 5：可以更改图标的 BACKGROUND-COLOR 以使其不会溢出到边框外吗？

Question

我想更改 Font Awesome 5 图标的背景颜色。不幸的是，当我指定背景颜色时，它会溢出图标的边框。

这是一个示例：

<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 路径没有填充，您可以随时编辑 SVG 使其填充。

Answer 2

我向非常有帮助的 Font Awesome 支持人员提出了这个问题，并被指示使用他们内置的分层和功率转换来创建自定义图标。

Note: This solution only works if you're using the SVG + JS version of 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

Font Awesome 5：可以更改图标的 BACKGROUND-COLOR 以使其不会溢出到边框外吗？

Font Awesome 5: Possible to change BACKGROUND-COLOR of icon so it doesn't bleed outside border?

icons

background-color

font-awesome-5