如何使用字体图标作为背景图像？

Question

1) 我知道我可以使用伪选择器（之前、之后）和“内容”来使用字体图标，但这不是一个可扩展的解决方案，因为我需要对填充、左侧、顶部等进行许多更改不同的情况

2) 使用 Data URI 一个 svg 是可以的，但我需要更改 svg 的填充/颜色 根据不同的动作。我尝试了填充属性，但它并没有真正起作用。

我可以在外部更改/编辑颜色，但我有很多变化，而且无法缩放

---

图标字体（例如：FontAwesome）带有浏览器的 SVG 文件。是否可以在 css 中以某种方式使用该文件（如图像精灵）？

Answer 1

如果您想修改 SVG 的属性，则必须内联放置。所以使用 SVG 作为背景 和 修改属性是行不通的。

像 FontAwesome 这样的库会为您提供 font，而不是 svg，您也不能将其设置为背景。

我没有看到使用 psuedo-selectors :before 和 :after 的问题。在我看来，它们具有很强的可扩展性。

如果您真的想以不同的方式做，您应该与我们分享您的一些代码，以便我们更好地了解您想要做什么。