如何在CSS中使用圖標作為“背景圖像”而不是圖像

Question

我想使用圖標作為背景圖像，而不是使用任何圖像。 有什么辦法嗎？

通常我們將“背景圖像”寫為：

background-image: url(...)

但是我想使用fontawesome圖標作為背景。 有什么辦法可以在字體內寫入fontawesome圖標的Unicode？

url()

CSS專家，請幫助我。

Answer 1

一種實現方法是下載圖標的SVG，然后像使用其他圖像一樣使用它，就可以在真棒字體網站中找到每個圖標的SVG文件。

SVG的優點是它們是矢量，因此無論您放大多少，都不會造成質量損失。

Answer 2

您可以獲取任何SVG或PNG圖標文件，並將其用作背景。

例如

https://codepen.io/hisbvdis/pen/XWrBKNp

 body { background: url("https://image.flaticon.com/icons/svg/60/60993.svg") 0 0 / 20px 30px repeat; }