css 伪类与字体图标_通过 :before 在文本前添加字体图标

最常见原因是未设置 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。