字体图标显示为方块或问号，主因是字体文件未加载或未正确声明：需确保@font-face路径可访问、font-family名完全匹配、content用"\e900"格式十六进制码，并显式设置font-family及normal字体样式。
content属性插入图标字符时显示为方块或问号
直接写 Unicode 字符（如 \e900）但没配对字体，浏览器就渲染不出图标，只显示占位符。这不是 CSS 写错了，而是字体文件没加载或没声明。
- 确保图标字体（如 IconFont、Font Awesome 的 Web Font）已通过
@font-face正确引入，且src路径可访问 -
content中必须用反斜杠转义的十六进制格式，例如"\e900"，不能写成"e900"或"" - 在
::before上必须显式设置font-family，且值要和@font-face中的font-family完全一致（区分大小写、空格） - 推荐加
font-style: normal; font-weight: normal;，避免被继承样式干扰
用 Font Awesome 5+ 的 SVG 方式替代 content + 字体方案
现代项目更推荐用官方 SVG 框架而非 CSS content 插入，因为后者依赖字体加载、不支持颜色继承、无法用伪元素做 hover 动画控制。
- CDN 引入 JS 版本：
<script src="https://kit.fontawesome.com/xxxxx.js"></script> - 直接写 HTML 标签：
<i class="fas fa-home"></i>，无需伪元素 - 如果仍需伪元素控制（比如仅对特定状态加图标），改用
background-image: url("data:image/svg+xml,...")更可靠
content 中的 Unicode 值怎么查？别靠复制粘贴
从设计稿或字体平台复制的字符容易出错——看起来是图标，实际是私有区（PUA）编码，但复制后可能变成 UTF-8 实体或乱码。
- 打开字体文件（.ttf/.woff2）用工具如 FontDrop 查看真实 Unicode 码点，记下十六进制值（如
e901） - 在 CSS 中写成
"\e901"，注意前面是反斜杠，不是斜杠，且不能有空格 - Chrome 开发者工具里选中伪元素 → Styles 面板 → 找到
content，鼠标悬停会显示“rendered value”，可验证是否解析成功
IE11 下 content 插入图标完全不显示
IE11 支持 content 和 ::before，但对字体加载时机敏感，尤其当字体异步加载或跨域时，::before 渲染早于字体就留白。
- 避免用
font-display: swap（IE 不支持），改用block或直接内联关键图标字体 - 给
::before加visibility: hidden，等字体加载完成再用 JS 切换（监听document.fonts.load） - 更稳妥的做法：服务端渲染时直接输出
<span class="icon icon-home"></span>，CSS 控制背景图或字体，绕过 IE 的伪元素字体竞态
content 语法，而是字体加载链路中某个环节断了——路径 404、CORS 头缺失、PUA 编码不匹配，或者开发时用的字体版本和上线时不一样。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
