CDN引入Font Awesome离线失效主因是字体文件依赖网络，解决需本地引入并修正路径；SVG图标须用fill="currentColor"才能受CSS color控制；favicon必须用根相对路径href="/favicon.ico"避免404。
用 CDN 引入 Font Awesome 最省事，但得联网
本地开发时打不开图标，90% 是因为没联网——CDN 方式依赖实时加载远程 CSS 和字体文件，离线状态下 https://cdnjs.cloudflare.com 根本连不上。all.min.css 里已内联了字体数据（base64）或通过 @font-face 指向 CDN 上的 .woff2，后者在离线时必然失败。
实操建议：
- 开发阶段先确认网络通畅；若需离线，改用本地引入：下载
fontawesome-free-6.x.x-web.zip，把webfonts/和css/all.min.css放进项目，调整all.min.css里的url(../webfonts/...)路径为相对路径 - 别直接复制旧教程里的 v5 链接（如
font-awesome/5.15.4），v6 的类名前缀变了：fa-user→fas fa-user，fa-home→fas fa-house - 加
integrity和crossorigin属性不是可选的：缺了会导致某些浏览器拒绝加载，表现为图标显示为空白方块
iconfont 本地引入失败，大概率是字体路径写错了
iconfont.css 里写的 url('iconfont.woff2') 是相对于该 CSS 文件的位置，不是 HTML 页面位置。很多人把 CSS 放在 /css/iconfont.css，字体却丢在 /fonts/iconfont.woff2，结果浏览器发请求到 /css/iconfont.woff2，404。
检查和修复步骤：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 打开浏览器开发者工具 → Network 面板，刷新页面，过滤
woff2，看是否返回 404；如果是，点开该请求，看 Request URL 实际路径 - 打开
iconfont.css，搜索@font-face，确认src中所有url(...)的路径是否指向真实存在的字体文件 - 最稳做法：把
.woff2、.woff、.ttf和iconfont.css放同一目录，CSS 里保持默认url('iconfont.woff2')不改 - 别手写绝对路径如
url('/fonts/iconfont.woff2')——本地 server（如 vite、webpack dev server）常挂子路径（localhost:3000/myapp/），根路径会错位
SVG 内联图标要写 fill="currentColor"，不然颜色没法用 CSS 控制
直接粘贴 Figma 或在线生成器导出的 SVG，常带硬编码 fill="#000" 或 style="fill:#333"，这会覆盖外部 CSS 的 color 设置，导致 svg { color: red; } 完全无效。
正确写法要点：
- 删掉所有
fill属性和style里的 fill 声明 - 在
<svg></svg>标签上加fill="currentColor"（注意是属性，不是 CSS） - 父容器设
color即可同步控制图标色：<div style="color: #007bff"><svg ...>...</svg></div> - 避免用
<img src="icon.svg" alt="HTML怎么引入图标库_html图标字体库引入使用方法【基础】" >加内联 SVG 效果——<img alt="HTML怎么引入图标库_html图标字体库引入使用方法【基础】" >无法用 CSS 修改内部 fill，也不支持伪类交互
<link rel="icon"> 必须用绝对或根相对路径，子页面才不会 404
favicon 不是页面内容，是浏览器标签页左上角那个小图，靠 HTML 的 <link rel="icon"> 声明，跟 CSS/JS 加载逻辑无关。写成 ./favicon.ico 看似合理，但在 /blog/post.html 页面，浏览器会去请求 /blog/favicon.ico，而不是根目录下的文件。
安全写法只有两种：
-
href="/favicon.ico"（根相对路径，推荐） -
href="https://yoursite.com/favicon.ico"（绝对 URL，适合多环境部署） - 别用
type="image/png"去替代.ico——Safari 在某些版本下对非 .ico favicon 渲染异常，甚至忽略 - 需要多尺寸适配（如 iOS 启动图、macOS 标签页高清缩略图），就多次声明：
<link rel="icon" sizes="16x16" href="/favicon-16x16.png">、<link rel="icon" sizes="32x32" href="/favicon-32x32.png">，但基础.ico版本必须保留
真正容易被忽略的是路径解析规则——它不走 JavaScript 或 CSS 的相对路径逻辑，而是由浏览器按当前 URL 的 base path 机械拼接，错一个斜杠或少一个开头的 /，就全盘失效。
