最常见原因是未设置 content 或未声明正确的 font-family；伪元素需 content: "" 才渲染，font-family 必须与 @font-face 严格一致，避免父元素 font-size: 0 或 line-height: 0 导致图标不可见。
为什么 :before 添加字体图标后图标不显示
最常见原因是没设置 content，或没声明 font-family 指向图标字体（如 "iconfont"）。伪元素默认是 inline，若父元素设置了 font-size: 0 或 line-height: 0，图标也会被“压扁”不可见。
-
:before必须带content: ""（哪怕为空字符串），否则完全不渲染 - 图标字体名必须和
@font-face中定义的font-family值严格一致，区分大小写 - 避免在父元素上设
font-size: 0；如需控制尺寸，单独给伪元素设font-size - 确保图标字体文件已加载完成，可加
font-display: block防 FOIT
如何用 :before 插入具体图标字符（如 Font Awesome 或自定义 iconfont）
以 iconfont.cn 下载的字体为例，需先引入 CSS，并确认图标 Unicode 编码（如 \e601）。注意：Unicode 值必须用反斜杠转义，且前面不能漏掉引号。
.btn-home::before {
content: "\e601";
font-family: "iconfont";
font-size: 14px;
margin-right: 6px;
}
- Unicode 值来自图标详情页的「Unicode」字段，不是 HTML 实体（如
） - 若用 Font Awesome 5+，推荐用 SVG 方式；如坚持用 Web Font，需用
fa字体族名 + 对应 Unicode（查官方 CSS 文件） -
margin-right比padding更安全——避免影响文本行高或触发换行
:before 和内联 SVG 哪个更适合图标前置
纯 CSS :before 轻量、易复用，但无法动态变色（除非用 currentColor）、不支持多色图标、缩放时可能模糊。SVG 可直接设 fill、响应式缩放无损，但体积略大、CSS 控制粒度更细。
- 单色小图标、大量复用场景（如菜单项、按钮前缀）→ 优先
:before+ 字体图标 - 需要 hover 变色、动画、或含描边/渐变的图标 → 改用内联
或 - 若用
:before，建议配color: currentColor，让图标随文字色自动同步
兼容性与性能注意点
:before 本身 IE8+ 全支持，但字体图标在旧 Android（≤4.3）或 iOS Safari（≤9）中可能因字体格式（WOFF2）或渲染引擎问题显示为方块。
- 确保提供
.woff回退格式（@font-face中按顺序声明，浏览器选第一个支持的） - 不要把所有图标塞进一个字体文件再全局加载；按需提取子集（用 iconfont.cn 的「下载代码」→「FontClass / Symbol」方式更可控）
- 慎用
font-weight或font-style修改图标——
多数图标字体未定义这些变体，可能导致 fallback 到系统字体
content 和 font-family，真正卡住的往往是字体加载时机、父容器的排版约束，还有那个你以为“只是装饰”的 line-height。
