如何在 SVG 圆圈中放置 Font Awesome 图标？

Answer 1

您的代码的问题是

<i>

不是 SVG 的一部分，因此浏览器将其移到

<svg>

元素之外。
您可以使用另一个

<tspan>

与相应的 HTML 实体



:

<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>