如何将Font Awesome图标置于SVG圆形内并调整其位置？

你当前的代码无法正确渲染Font Awesome图标，因为SVG的<text>元素不支持嵌入HTML标签（比如<i class="fa fa-trophy"></i>），也没法直接实现文本与图标的垂直排列。可以通过以下方法解决：

核心思路是用SVG的<foreignObject>元素嵌入HTML内容，利用CSS Flex布局实现文本与图标的垂直居中排列，确保两者位于圆形内部且图标在文本正下方。

修改后的完整代码：

<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"/>
    <!-- 使用foreignObject嵌入HTML内容 -->
    <foreignObject x="10" y="20" width="80" height="60">
      <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;">
        <span style="font-size: 18px; font-family: Verdana; color: #000;">20000</span>
        <i class="fa fa-trophy" style="color: #000; margin-top: 4px;"></i>
      </div>
    </foreignObject>
  </svg>
</div>

关键说明：

• <foreignObject>：允许在SVG中嵌入HTML内容，通过设置x、y、width、height控制它在SVG中的位置和大小，确保完全落在圆形内部
• 内部div用flex-direction: column实现垂直排列，align-items: center让内容水平居中，justify-content: center让内容垂直居中
• 调整margin-top可以控制图标与文本的间距，优化布局美观度

内容的提问来源于stack exchange，提问作者Zoinky