父元素必须显式设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% 缩放），图标就会偏移。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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></style>、<script></script> 或外部 <use href></use>，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 被当成可选而不是必填。这些点不报错，也不警告，只让图标消失或错位——得一个个去排除。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！