如何使用字體圖標作爲背景圖像？

1）我知道我可以使用僞選擇器（before，after）和「content」來使用字體圖標，但它不是一個可伸縮的解決方案，因爲我需要對填充，左，頂等情況如何使用字體圖標作爲背景圖像？

2）使用數據URI svg是好的，但我需要根據不同的操作更改svg 的填充/顏色。我嘗試了填充屬性，但它並沒有真正起作用。

我可以改變/編輯的彩色外觀，但是我有很多的變化，再次不結垢

圖標字體（例如：FontAwesome）都使用了瀏覽器SVG文件。有可能以某種方式在CSS中使用該文件（如圖像精靈）？

來源

2017-02-16 user3541631

僞元素技巧是超級靈活的。我不明白你爲什麼不能使用它。 –

如果你想修改SVG的屬性，它將不得不放在內聯。所以使用SVG作爲背景和修改屬性將不起作用。

圖書館像FontAwesome給你font，不svg「，你不能設置爲背景要麼秒。

我沒有看到使用僞選擇器的問題：之前和之後爲此。在我看來，它們是非常可擴展的。

如果你真的想要改變它，你應該與我們分享一些你的代碼，這樣我們可以更好地理解你想要做什麼。

來源

2017-02-16 15:32:19

我想將圖標放置在表單域左側或右側。我有很多變化作爲輸入的大小，但也作爲國家（定義左或賴特）和什麼時候。因爲以前不能有，之後我需要添加一個父元素和圖標元素。結合這與許多變化的CSS（填充，邊距等），我有很多工作。使用它們作爲背景（添加或刪除一個類）只需要輸入元素，我認爲它不那麼「密集」，代碼少並且可擴展性更強。 – user3541631

您可以做的是創建一個輸入組div，其中包含一個輸入元素和一個具有背景的div。然後選擇背景元素.input-group .background-element並將其絕對定位到輸入中。或者使用輸入+ .background-element –

選擇它，謝謝，我會嘗試 – user3541631

如何使用字體圖標作爲背景圖像？

回答

相關問題