为什么 Font Awesome SVG 图标的简单颜色更改不起作用？

Answer 1

作为独立外部图像访问的

SVG 文件（例如

<img>

或

background-image

）必须是独立的。文件外部的样式不会影响 SVG。

您可以将其视为只是一个 PNG 文件。

Answer 2

这是使用 FontAwesome 6.4.2（专业版，但这应该不重要）。

我发现将 svg 标签上的

fill

设置为“none”，并将路径标签上的

stroke

和

fill

属性设置为“currentColor”允许我使用 CSS 自由更改颜色。我使用包含 SVG 的标签上的类来执行此操作，而不是 SVG 标签本身，尽管我认为这也可以。

<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="24" height="24" viewBox="0 0 512 512">
    <!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
    <path stroke="currentColor" fill="currentColor" d="...path info..."/>
</svg>

或者，您可以使用 CSS

filter

设置，但我认为使用起来不太方便。