父元素必须显式设position: relative，否则::before用absolute定位时会向上查找最近已定位祖先，找不到则相对于body偏移，导致图标飘至左上角或随滚动错位；即使父元素无需偏移，也须设position: relative（z-index: 0可选），且推荐用transform而非top/left微调位置。
父元素必须显式设 position: relative
伪元素 ::before 用 position: absolute 定位时，浏览器会向上查找最近的「已定位祖先」。如果没找到，它就相对于 body 偏移——图标直接飘到页面左上角或随滚动错位。这不是 bug，是 CSS 定位规则本身决定的。
常见错误：只给 ::before 加 top: 5px; left: 10px，却忘了父元素连 position 都没设。
- 哪怕父元素原本不需要定位，也得加
position: relative（z-index: 0可选，但非必需） - 若父元素已是
absolute或fixed，要检查它的定位基准是否正确——可能它的父级漏了relative - 别依赖
display: inline元素的line-height来“估算”图标垂直位置，换字体或缩放后立刻失效
transform 比 top/left 更稳
用 top: -2px 这类固定像素偏移，看似简单，但一旦父元素 font-size 改变、line-height 调整，或者用户启用系统缩放（如 Windows 125% 缩放），图标就会偏移。
transform 基于自身尺寸计算，适应性更强：
立即学习“前端免费学习笔记（深入）”；
- 垂直居中推荐写法：
top: 50%; transform: translateY(-50%) - 水平居中可用：
left: 50%; transform: translateX(-50%) - 避免混用：
top+transform在某些旧版 Safari 中有渲染抖动风险
用 content: url() 插 SVG 时必须设宽高
content: url(./icon.svg) 看似简洁，但 SVG 没有固有尺寸，伪元素默认也不生成盒模型。不设 width/height，图标常为空白或撑乱布局。
- 必须显式声明
width和height（如16px），不能只靠font-size - SVG 文件里带
<style>、<script>或外部<use href>，content: url()会静默失败 - 路径是相对于 CSS 文件位置，不是 HTML；CDN 上的 SVG 要注意 CORS
- 更可控的替代方案：
background-image: url("data:image/svg+xml,...")+content: ""，再配background-size: contain
字体图标需匹配 font-family 和 font-weight
用 Font Awesome 之类字体图标时，content: "\f005" 不生效，90% 是因为 font-family 名字不对，或 font-weight 没配对。
- Free 版 solid 图标必须用
font-weight: 900；regular 图标用400 -
font-family必须和@font-face中定义完全一致（包括引号、空格、大小写） - 在开发者工具的 Computed 面板里查
font-family是否生效，有没有 warning - 别复制网页上看到的字符（比如 ✔），那是渲染结果；要去官方文档查原始 Unicode，写成
"\2714"（不是"\u2714"）
position: relative，或者 SVG 的 width 被当成可选而不是必填。这些点不报错，也不警告，只让图标消失或错位——得一个个去排除。 
