使用API或Live Server时FontAwesome代码自动插入HTML文件求助

原因排查 #

1. Font Awesome Free CDN的自动注入 #

Font Awesome Free版的CDN服务会在检测到页面存在Font Awesome图标类但未显式引入CSS资源时，自动注入@font-face代码来保证图标正常渲染，这是Free版的默认行为，可能在API请求或Live Server实时加载时触发。

2. 浏览器扩展/代理工具的干扰 #

资源优化类浏览器扩展、广告拦截器或代理工具，可能会在请求HTML文件时自动插入Font Awesome资源代码，试图修复页面图标显示问题。

3. Live Server插件的自动注入设置 #

VS Code的Live Server插件若开启了第三方脚本注入选项，或项目中存在自定义的.live-server.json配置，可能导致外部资源代码被插入到HTML中。

解决方法 #

1. 显式引入Font Awesome CSS #

在HTML的<head>标签中手动添加官方CSS引入，让CDN不再触发自动注入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

如果不需要Font Awesome图标，直接删除页面中所有fa-*类名即可彻底避免触发自动注入。

2. 排查浏览器扩展与代理 #

• 临时禁用所有浏览器扩展，测试问题是否消失，逐步排查出导致注入的扩展并禁用
• 关闭VPN、本地代理等工具，确认是否是代理层的自动注入

3. 调整Live Server配置 #

• 在VS Code设置中搜索Live Server，找到并关闭Inject Script相关的自动注入选项
• 删除项目根目录下的.live-server.json配置文件（若存在），恢复插件默认设置

4. 清理项目第三方脚本 #

检查项目中引入的外部脚本（如统计、UI组件脚本），确认是否有脚本会修改HTML内容，移除不必要的脚本或替换为无注入的纯净版本

内容的提问来源于stack exchange，提问作者Sem Tavares González