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

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

2） 在svg中使用数据URI是可以的，但是我需要更改svg的填充/颜色 基于不同的行动。我尝试了fill属性，但它实际上不起作用

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

---

---

图标字体（例如：FontAwesome）随浏览器的SVG文件一起提供。可以在css中使用该文件（如图像精灵）？

如果您想修改SVG的属性，则必须将其内联放置。因此，使用SVG作为背景和修改属性将不起作用

像FontAwesome这样的库为您提供了

font

，而不是

svg

，您也不能将其设置为背景

我认为使用psuedo选择器：before和：after进行此操作没有问题。在我看来，它们是非常可伸缩的

---

如果你真的想做不同的事情，你应该和我们分享你的一些代码，这样我们就可以更好地了解你想做什么。

伪元素技巧非常灵活。我真的不明白你为什么不能使用它。我想把图标放在表单字段的左边或右边。我有很多不同的输入大小，也有状态（定义左或右）和时间。因为之前不能有，之后我需要添加一个父元素和图标元素。结合css的许多变体（填充、边距等），我有很多工作要做。使用它们作为背景（添加或删除类），只使用输入元素，我认为这样“强度”更小，代码更少，可扩展性更强。您可以创建一个输入组div，其中包含一个输入元素和一个具有背景的div。然后选择background元素.input group.background元素并将其绝对定位到输入中。或者使用输入+.background选择它-element@user3541631让我知道它是否有效。如果您正在努力解决某些问题，请随意分享您编写的代码，我会看一看：）