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

Question

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.

Answer 1

One way to do it is to download the SVG of the icon, and just use it how you use other images, you can find the SVG file of every icon in font awesome website.

The good thing about SVGs is that they are vector, so there is no quality loss no matter how much you zoom in.

Answer 2

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; }