用 ::before 插入小图标需设 content（如""、Unicode或url）和 display（推荐 inline-block），字体图标要确保 @font-face 引入、font-family 指定及 Unicode 转义正确（如\e901），SVG 推荐用 background-image 替代 content: url() 以避免尺寸失控，IE8 需用 :before 单冒号并处理 z-index。
用 ::before 插入小图标需要设置 content 和 display
纯 CSS 的 ::before 伪元素默认不渲染，必须显式指定 content（哪怕只是空字符串），且推荐设为 display: inline-block 或 inline 才能稳定控制尺寸和对齐。常见错误是只写 content: "" 却忘了设宽高或背景，结果图标“看不见”。
-
content必须存在：可为""、"●"、"\e901"（字体图标 Unicode）或url("icon.svg") - 若用背景图，需设
width/height，否则::before高度为 0 - 避免依赖
line-height垂直居中——改用transform: translateY(-50%)+top: 50%更可靠
插入字体图标（如 Iconfont、Font Awesome）的关键三步
用字体图标最轻量，但容易卡在 Unicode 转义或字体未加载。核心是确保字体文件已引入、类名/Unicode 正确、且 ::before 继承了字体族。
- 确认字体已全局声明，例如：
@font-face { font-family: "iconfont"; src: url("//at.alicdn.com/t/c/font_XXX.woff2") format("woff2"); } - 在
::before中指定字体和 Unicode：.item::before { font-family: "iconfont" !important; content: "\e901"; /* 注意 \e901 是十六进制 Unicode，不能写成 e901 */ margin-right: 8px; } - 禁用用户选中图标文字：
-webkit-user-select: none; -moz-user-select: none; user-select: none;
用 url() 引入 SVG 图标时的尺寸陷阱
直接 content: url("check.svg") 看似简单，但 SVG 尺寸常失控：它默认按原始 viewBox 缩放，且不响应父元素 font-size。必须手动约束。
-
width和height必须显式设置，否则可能撑满整行 - 优先用
background-image替代content: url()，更易控制缩放：.btn::before { content: ""; display: inline-block; width: 16px; height: 16px; background: url("success.svg") no-repeat center / contain; margin-right: 6px; } - 若坚持用
content: url()，SVG 文件本身应尽量精简 viewBox，并避免内联width/height属性
IE 兼容性与伪元素层级问题
::before 在 IE8+ 支持，但 IE8 只认单冒号 :before；更麻烦的是，它默认渲染在元素内容「之下」（z-index 为负），导致图标被遮挡。
立即学习“前端免费学习笔记（深入）”；
- IE8 兼容写法：
.icon:before { ... }（不用双冒号） - 确保图标显示在文字上方：
position: relative;给父元素，再给::before加position: absolute;和z-index: 1; - 不要对
::before使用transition动画后加display: none—— 这会中断动画；改用opacity: 0+visibility: hidden
实际项目里，最常被忽略的是字体图标加载延迟导致的“闪动”，以及 SVG content: url() 在 Safari 下的尺寸抖动。建议优先用 background-image 方式，可控性高，兼容性好。
