How to display svg image without using Icomoon, Fontello, just like bootstrap-icon library using onl-CodePudding

For example I have a file alert.svg. I want to display it on the screen in the form of <i ></i> via html, css. How can this be done?

CodePudding user response：

What you could do is click the file in visual studio code or whatever your code editor is and then copy the <svg> code and just paste it in your html code.

or another way is to use the <img> tag, like this:

<img src="alert.svg" alt="" />

But if your question is to actually display the svg file with the <i> tag... You'd have to make your own font-family on icons and then use the content in css. Like this:

.iconclass:before {
   font-family: "Font Awesome 5 Pro";
   content: "\f843";
}