I need some insights on how to do this:
I have a scraped .html file which has the full structure which it has some references in there to a custom font-family.
I was able to track that font-family and found that it was a giant .svg file. I took all the contents from the .svg file and placed the svg code inside the HTML file.
So here is what I currently have:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<a href="https://test.com/"><i class="search">INSERT ICON</i></a>
<script src="js/scripts.js"></script>
</body>
</html>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<font id="testicons" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode=" " horiz-adv-x="512" d="" />
<glyph unicode="" glyph-name="badge_icon" d="M511.986 58.88c76.042 0 148.972 30.836 202.742 85.726 53.77 54.886 83.978 129.331 83.978 206.957 0 77.623-30.208 152.067-83.978 206.957s-126.7 85.725-202.742 85.725c-76.042 0-148.972-30.835-202.741-85.725s-83.978-129.335-83.978-206.957c0-77.626 30.208-152.071 83.978-206.957 53.77-54.89 126.699-85.726 202.741-85.726zM461.81 415.075l35.652 57.767c6.67 10.803 22.378 10.803 29.047 0l35.652-57.767 63.208-11.677c12.356-2.28 18.094-16.678 10.694-26.832l-42.895-58.87 7.697-64.672c1.485-12.472-10.557-22.224-22.449-18.173l-66.43 22.634-70.499-21.972c-12.22-3.809-24.129 6.694-21.879 19.296l11.237 62.887-44.107 58.658c-7.636 10.151-1.898 24.788 10.602 27.051l64.471 11.67zM351.099 857.6h141.558v-172.682c-100.27-6.811-155.977-47.214-186.121-76.382v204.191c0 24.783 19.952 44.873 44.563 44.873zM678.782 857.6h-141.558v-172.682c100.27-6.811 155.976-47.214 186.122-76.382v204.191c0 24.783-19.954 44.873-44.564 44.873z" />
</font></defs></svg>
So I would love to be able to use the glyph badge_icon and render it inside my <i> tag, is this possible in HTML?