Razor Pages共享页脚自定义音频播放器FontAwesome图标异常重复

问题根源 #

你代码里的FontAwesome图标标签未正确闭合：

<i class="fas fa-backward"</i>

这里缺少了一个>，导致浏览器解析HTML时出现混乱，把后续内容错误识别为标签的一部分，进而出现多个图标错位的情况。

修复方案 #

把页脚里的图标标签修正为正确闭合的格式：

<footer class="border-top footer text-muted">
    <div id="audio-container">
        <i class="fas fa-backward"></i>
    </div>
</footer>

额外检查点 #

• 排查整个布局文件中是否存在其他未闭合的HTML标签，这类语法错误很容易引发渲染异常
• 清除浏览器缓存后重新加载页面，确保新的代码生效

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