JavaScript中innerHTML使用外部JS图标不显示的问题求助

问题根源 #

图标库（比如Font Awesome这类）在页面首次加载时，只会扫描初始DOM里的图标元素并完成渲染。通过innerHTML动态插入的元素，不会被图标库自动识别处理，所以无法显示成图标。

具体解决步骤 #

1. 确保图标库正确引入 #

在HTML的<head>里引入图标库的官方JS文件（以Font Awesome为例），不要重复在innerHTML里插入<script>标签：

<head>
  <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/js/all.min.js"></script>
</head>

2. 动态添加元素后手动触发图标渲染 #

修改你的JavaScript代码，把模板内容添加到<body>后，调用图标库的初始化方法，让它重新扫描DOM并渲染新添加的图标：

const headerTemplate = document.createElement('template');
headerTemplate.innerHTML = `
  <i class="fab fa-twitter"></i>
`;
// 将模板内容直接追加到body标签内
document.body.appendChild(headerTemplate.content.cloneNode(true));
// 手动触发Font Awesome的图标渲染
if (window.FontAwesome) {
  FontAwesome.dom.i2svg();
}

额外说明 #

• 如果你用的是图标库的CSS版本（通过<link>引入CSS文件），动态添加元素后一般不需要额外操作，但要确保图标类名拼写完全正确（比如fab fa-twitter是Font Awesome的Twitter图标类名）。
• 不要尝试在innerHTML里插入<script>标签，这种方式不仅执行时机不可控，还可能导致重复加载资源，反而引发问题。

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