伪元素插入iconfont不显示的主因是未显式设置font-family和font-display，且content需用unicode格式如”e601″；须确保字体加载完成、src路径正确、font-family唯一，并适配safari渲染问题。
伪元素里用 ::before 或 ::after 插入 Iconfont 为什么没显示
常见现象是图标空白、显示方块、或直接不渲染。根本原因不是 Iconfont 本身坏了，而是伪元素默认不继承字体相关属性，content 值虽设对了 Unicode，但没指定 font-family 和 font-display 行为。
- 必须显式设置
font-family为 Iconfont 的字体名（比如'iconfont'），不能依赖父级继承 -
content必须是 Unicode 字符串，写成"e601"（注意反斜杠+小写 e+4 位十六进制），不能写成 HTML 实体 - 确保字体文件已加载完成——如果 css 在字体加载前就解析并渲染，伪元素会 fallback 到系统字体，显示方块
- 推荐加
font-style: normal; font-weight: normal;，避免某些图标字体因样式冲突被替换
Iconfont 的 font-face 声明顺序和 src 路径怎么写才稳
很多项目图标突然变方块，问题出在 @font-face 的 src 路径错位或格式支持不全。现代浏览器对字体格式兼容性有差异，单写一种格式风险高。
-
src推荐按优先级从高到低排列：woff2→woff→ttf，例如：src: url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff') - 路径必须相对于 CSS 文件位置，不是 HTML 页面；用相对路径时别漏掉
../，用绝对路径时以/开头更可靠 - 别在
@font-face里写unicode-range除非真做了子集切割，否则容易导致部分图标匹配失败 - 开发期可临时加
font-display: swap;，让文字先显示再换图标，避免布局跳动
多个 Iconfont 字体混用时，font-family 名称冲突怎么办
当项目同时引入阿里图标库、自定义 iconfont、甚至第三方 ui 库的图标字体时，font-family 都叫 'iconfont'，后声明的会覆盖前者的映射关系，结果就是部分图标乱码或消失。
- 每个
@font-face的font-family必须唯一，比如改成'ali-icon'、'my-icons' - 对应伪元素里也得同步改：
font-family: 'my-icons';，漏改一个就白配 - 别指望靠
!important强行覆盖字体族——CSS 字体匹配是按声明顺序和 specificity 共同决定的，!important不起作用 - 构建工具（如 webpack）若自动注入字体 CSS，要检查它是否重写了
font-family，必要时关掉自动注入，手管
伪元素图标在 Safari 或旧版 edge 上渲染模糊或偏移
这不是 bug，是字体渲染引擎差异：Safari 对小字号下的 hinting 处理更激进，而伪元素默认没有 line-height 和 vertical-align 控制，导致基线错位、像素发虚。
立即学习“前端免费学习笔记（深入）”；
- 给伪元素加
display: inline-block;+vertical-align: middle;，比纯inline更可控 - 设置明确的
font-size（比如16px），避免继承不确定值；配合line-height: 1;消除上下留白 - Safari 下若仍有模糊，尝试加
-webkit-font-smoothing: antialiased;，但注意这会让图标变细，需同步调大font-weight - 不用
transform: scale()放大图标——它放大会拉伸像素，伪元素内容本质是文字，应优先调font-size
事情说清了就结束。最常被忽略的是：伪元素不继承字体族，也不等字体加载完成才渲染，这两点一叠加，就足够让图标在首屏永远不出现。