How do I use a .svg image as a HTML icon?
Question
I have some .svg images and I want to use then as icon in my webpage. Is there any way to do this with the <i> tag?
1 answers
solution1
1 ACCPTED 2022-06-07 19:03:24
I've solved my problem adding the svg code of the image directly on my html.
Something like this:
<svg class="bi bi-x-circle" fill="#ec5e45" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/> </svg>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I use SVG icons in HTML?
How do I dynamically insert an SVG image into HTML?
HTML CSS: Use Collapsible Toggle with SVG Icon
How do I add a svg icon next to my dl item?
How do I display a Bootstrap 4 SVG icon in a button with a CSS class?
How do I Display a .svg Icon Without it Getting Clipped?
How do I center an svg in my html?
SVG.js How do I add an svg to the HTML page
How do I include an svg image using the <svg> element?
How do I have an SVG image inherit colors from the HTML document?
Related Tags