最常见的原因是伪元素默认 display: inline 且未设置 font-style: normal、font-family 或 content 转义错误，导致字体图标渲染为方块或空白。
为什么 ::before 和 ::after 里的字体图标不显示
最常见原因是伪元素默认是 display: inline，而很多字体图标（比如 Font Awesome、iconfont）依赖 font-family 和 content 的组合生效，但缺少 font-display 或未设置 font-style: normal 会导致图标渲染为方块或空白。
- 确保目标字体已正确加载，且在
@font-face中声明了font-display: swap或block -
::before/::after必须有content值（哪怕只是空字符串""），否则整个伪元素不会渲染 - 部分图标字体要求
font-style: normal和font-weight: normal，否则 Unicode 字符可能被斜体/加粗干扰 - 避免用
content: ""这类裸 Unicode——应转义为\e602（十六进制）格式，防止编码解析失败
如何用 ::before 正确插入 iconfont 图标
以阿里 iconfont 为例，下载的 CSS 里通常定义了类似 .icon-home::before { content: "\e602"; } 的规则。直接复用需注意作用域和继承：
- 不要把
.icon-home当作类名硬套，而是提取其content和font-family值单独使用 - 推荐写法：给目标元素加自定义类（如
btn--save），再用伪元素注入图标 - 必须显式声明
font-family，且值要与@font-face中的font-family完全一致（包括引号、空格）
.btn--save::before {
content: "\e602";
font-family: "iconfont" !important;
font-style: normal;
display: inline-block;
speak: none;
font-weight: normal;
}用 ::after 添加带文字的图标按钮（如“保存 →”）
这类场景容易因盒模型错位导致图标和文字不对齐，核心是控制伪元素的基线和尺寸：
-
vertical-align: middle对inline级伪元素有效，但需父容器行高稳定 - 更可靠的做法是设
display: inline-flex或display: flex，再用align-items: center - 图标字号建议设为
1em或与文字同高，避免缩放失真 - 如果图标后需要箭头等分隔符，
::after的content可用 Unicode（如"\2192"表示 →），无需额外字体
.btn--export::after {
content: "\2192";
margin-left: 4px;
font-family: sans-serif; /* 避免被图标字体污染 */
}IE11 及以下对伪元素字体图标的兼容问题
IE11 支持 ::before / ::after，但对 font-feature-settings、某些 Unicode 范围或 font-display 不敏感，容易 fallback 到宋体方块。
立即学习“前端免费学习笔记（深入）”；
- 务必在
@font-face中指定src的format("woff")，IE 不支持 woff2 - 避免使用私有 Unicode 区（U+F900–U+F9FF）以外的码位，部分 iconfont 把图标放在 U+E000–U+F8FF，IE 渲染更稳
- 可加兜底：用
background-image替代字体图标（仅限简单单色图标） - 测试时打开 IE 开发者工具，检查计算样式中
content是否被解析、font-family是否命中
字体图标通过伪元素注入看似简单，实际卡点集中在三处：字体加载时机、Unicode 转义准确性、以及 inline 元素的对齐行为。尤其当项目混用多套图标字体时，font-family 名称冲突和 !important 滥用会掩盖真实问题。
