CODEWITHSUNDEEP
csssass
dede
dede

Reputation: 841

How to make a new Icon in css?

I'm not sure whether the title is correct But I have a custom png file that I want to apply as an icon in an existing application. Because this is an existing application, I can't make too many changes in order to keep the consistency. The only thing that I have to do is by using icon tag.

<i class="icon name" />

I've tried to create a new class and set the background image.

.new-icon {
  background-image: url("./img/icon.png")
}

After that I applied that class in an icon tag like

<i class="new-icon" />

But the image didn't show at all. What I should do?

Upvotes: 0

Views: 726

Answers (2)

Nima Owji
Nima Owji

Reputation: 665

You should design your icon as SVG, then you can make it web fonts from here: https://fontello.com/

You can not use png as an icon.

Upvotes: 1

Nima Owji
Nima Owji

Reputation: 665

You can use <img> tag for png files but if you want to create something that you use in <i> you should create your icons as a font file, I suggest you to use <img> tag.

Upvotes: 1

Related Questions