Font Awesome图标不显示90%是网络或路径问题：CDN引入时离线导致woff2字体404，本地部署则需确保@font-face路径正确、格式齐全（woff2+woff）、font-family与类名匹配、Unicode一致，并避免混用版本或CSS冲突。
CDN引入Font Awesome后图标不显示，90%是离线或路径问题
直接用 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> 是最快方式，但本地开发时打不开图标，几乎全是网络原因：all.min.css 里实际通过 @font-face 指向了 CDN 上的 .woff2 文件，离线时必然 404。浏览器开发者工具 Network 面板里能看到字体请求失败状态。
实操建议：
- 开发阶段先确认能访问
https://cdnjs.cloudflare.com；若需离线，必须改用本地方式 - 不要手动修改 CDN 链接里的版本号（如把
6.5.0改成6.x），CDN 不支持通配符，会 404 - 避免在
中混用@import引入含@font-face的 CSS，它会阻塞渲染
@font-face本地加载时字体文件 404，关键在路径和格式顺序
本地引入不是把 @font-face 往 CSS 里一贴就完事。最常踩的坑是：路径写错、只提供一种格式、src 里 URL 没加引号，或者没处理相对路径层级。
正确做法：
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
url()中的路径必须相对于当前 CSS 文件位置，比如 CSS 在/css/style.css，字体在/fonts/iconfont.woff2，就得写url('../fonts/iconfont.woff2') - 务必提供至少
woff2+woff两种格式，现代浏览器优先用woff2，老浏览器 fallback 到woff - 每个
@font-face块要明确指定font-weight和font-style，哪怕都是normal，否则部分浏览器不识别 - 加上
font-display: swap，避免图标文字闪动（FOIT/FOUT）
Iconfont本地部署后类名无效，检查三处硬性条件
从 iconfont.cn 下载的压缩包解压后，图标还是不显示，通常不是代码写错，而是三个基础条件没满足。
必须逐项核对：
- HTML 元素必须同时带基础类名和图标类名，例如
<i class="iconfont icon-home"></i>—— 少一个都不行 -
iconfont.css中的@font-face的font-family值（如'iconfont'）必须和 HTML 元素最终计算出的font-family一致；用开发者工具 Elements 面板看 computed 样式，确认没被其他 CSS 覆盖 - 图标对应的 Unicode（如
\e900）必须和iconfont.css里.icon-home::before { content: "\e900"; }完全匹配，复制时容易多空格或漏反斜杠
用Symbol SVG替代字体图标？别盲目切换
看到“字体图标兼容性差”就去切 Symbol SVG，反而可能引入新问题：SVG <symbol></symbol> 需要预加载到页面 DOM，且依赖 <use></use> 的 xlink:href（旧）或 href（新），IE11 及以下不支持后者。
是否值得换，看真实约束：
- 如果项目已稳定用字体图标，且只需支持 Chrome/Firefox/Safari/Edge 新版，没必要动——字体图标体积小、CSS 控制强、缩放无损
- 如果必须支持 IE11，又不想处理字体 fallback，Symbol 是更稳妥的选择，但得确保
<svg></svg>容器提前注入（不能靠 JS 异步加载） - 注意：Symbol 方式无法用纯 CSS 改变图标颜色（除非用
fill: currentColor+ 父级 color 控制），而字体图标直接color: red就行
