CODEWITHSUNDEEP
htmlcssiconsfont-awesome-5
Shamim
Shamim

Reputation: 705

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.

Upvotes: 6

Views: 23688

Answers (2)

hisbvdis
hisbvdis

Reputation: 1380

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

enter image description here

Upvotes: 3

Phardin
Phardin

Reputation: 41

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.

Upvotes: 1

Related Questions