如何将图标用作 'background-image' 而不是 CSS 中的图像

How to use an icon as 'background-image' instead of an image in CSS

我想使用图标作为背景图像,而不是使用任何图像。有什么办法吗?

通常我们将'background-image'写成:

background-image: url(...)

但是我想用一个很棒的字体图标作为背景。有没有办法在

里面写fontawesome图标的Unicode

url()

请CSS专家帮助我。

一种方法是下载图标的 SVG,就像使用其他图像一样使用它,您可以在 font awesome 网站上找到每个图标的 SVG 文件。

SVG 的优点在于它们是矢量,因此无论放大多少都不会造成质量损失。

您可以获得任何 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;
}