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

I want to use an icon as a background image instead of using any image. Is there any way to do this?

Normally we write 'background-image' as:

background-image: url(...)

But I want to use a fontawesome icon as background. Is there any way to write the Unicode of fontawesome icon inside the

url()

Please help me, CSS experts.

Solution

You can get any SVG or PNG icon file and use it for background.

For example

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

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