图标不显示的根本原因是 content 值为空、非法或未设置，导致伪元素被忽略；需确保 content 含合法字符、字体正确加载、font-family 匹配、尺寸颜色可见且无 overflow 遮挡。
content 值为空或非法字符导致图标不显示
伪元素 ::before 必须配合 content 属性才能渲染，如果值为 ""、none 或未设置，浏览器直接忽略该伪元素，图标自然不可见。
-
content: ""是合法的，但仅创建一个空内容节点——需确保后续通过字体图标（如 Font Awesome、iconfont）注入真实字符 - 若用 Unicode 字符（如
\e900），必须确认该编码存在于当前字体文件中，且font-family正确指向图标字体 - 常见错误：复制了富文本中的全角引号或不可见字符，导致
content解析失败，建议手动输入英文双引号
字体图标未正确加载或 font-family 未生效
即使 content 写对了，图标仍不显示，大概率是字体资源没加载成功，或 CSS 优先级/继承导致 font-family 没应用到伪元素上。
- 检查开发者工具 Elements 面板，确认
::before元素是否计算出font-family，且值为你声明的图标字体名（如"iconfont"） - 图标字体
@font-face规则必须在伪元素样式前加载；若用 CDN，确保链接可访问（例如https://at.alicdn.com/t/c/font_XXX.woff2返回 200） - 伪元素默认继承父元素字体，但部分框架（如 Bootstrap）会重置
font-family，需显式覆盖：font-family: "iconfont" !important;
伪元素尺寸或颜色被父级样式意外覆盖
图标“存在”但看不见，常因尺寸太小、颜色透明、或被 overflow: hidden 截断。
-
font-size默认继承父级，若父元素字号极小（如12px），图标会缩成点状，建议单独设font-size: 16px或使用em相对单位 - 检查
color是否为transparent或与背景同色；若用 SVG 字体，还需确认fill是否被 CSS color 覆盖（部分字体需color: currentColor） - 若父容器有
overflow: hidden且伪元素用position: absolute偏移，可能被裁剪，可临时加border: 1px solid red确认位置
.btn::before {
content: "\e600"; /* 确保这是 iconfont 中定义的真实 Unicode */
font-family: "iconfont" !important;
font-size: 16px;
color: #333;
display: inline-block;
margin-right: 4px;
}
字体图标依赖链很脆：Unicode 编码 → 字体文件加载 → font-family 匹配 → 伪元素样式生效 → 尺寸/颜色/定位可见。任一环节断裂，图标就消失，排查时按这个顺序逐项验证最省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
