How can I position a Font Awesome icon in an SVG circle?

Issue

How do I get the trophy to be inside the circle, right under the 2000?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<div class="text-center content-align-items">
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke-width="4" style="opacity: 0.8;stroke: rgb(76, 182, 172);fill:white"/>
    <text fill="#000000" font-size="18" font-family="Verdana" text-anchor="middle" alignment-baseline="center">
       <tspan x="50" y="55">20000 <i class="fa fa-trophy"></i></tspan>
    </text>
  </svg>
</div>

https://jsfiddle.net/owc4kmLv/

Solution

The problem with your code is that <i> is not a part of SVG, so browser moves it outside of the <svg> element.
You might use another <tspan> though with the corresponding HTML entity :

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="text-center content-align-items">
  <svg height="100" width="100">
        <circle cx="50" cy="50" r="40" stroke-width="4" style="opacity: 0.8;stroke: rgb(76, 182, 172);fill:white"/>
        <text fill="#000000" font-size="18" font-family="Verdana" text-anchor="middle" alignment-baseline="center">
            <tspan x="50" y="55">20000</tspan>
            <tspan x="50" y="75" class="fa">&#xf091;</tspan>
        </text>
    </svg>


</div>

Answered By - Kosh