::before必须设置content属性（如content: ""或content: "\2713"）才能渲染，否则伪元素被完全忽略；需配合display: inline-block、vertical-align: middle及currentcolor等确保对齐与主题适配。
::before 必须写 content，否则图标根本不会出现——这是标题前加图标失败的首要原因。
为什么 ::before 在标题前什么都没显示？
最常见的情况是只写了样式，却漏掉 content。浏览器对伪元素极其严格：没有 content 值（哪怕为空字符串），整个伪元素会被忽略，color、font-size 全部失效。
-
content: ""是合法且常用的，适合纯色圆点、边框等无文字装饰 -
content: "★"支持直接输入符号，但注意中文/emoji 渲染不稳定，iOS 和 Windows 可能显示不同 -
content: "\2713"是推荐写法，Unicode 转义更可控（注意是反斜杠\，不是\u） -
content: url(./icon.svg)路径以 CSS 文件位置为基准，file://协议下常因 CORS 失败
怎样让图标和标题文字对齐不偏移？
伪元素默认是 display: inline，它参与文本流但基线对齐不可控。强行用 top 或 margin-top 很容易随字体变化错位。
- 加
display: inline-block才能设width/height、用vertical-align -
vertical-align: middle比top: -2px更可靠，它对齐的是行高中心，不受字号缩放影响 - 如果图标需要绝对定位（比如角标），父元素必须加
position: relative，否则position: absolute会相对于 body 定位 - 避免用
em或rem设置固定宽高（如width: 1em），会导致图标随文字缩放变形；纯装饰图形建议用像素值
用 Font Awesome 这类字体图标时，为什么显示成方块？
字体图标本质是 Unicode 字符 + 特定字体渲染，缺一不可。方块（□）说明字符被系统默认字体渲染了，而不是图标字体。
-
font-family值必须和@font-face中定义的**完全一致**，包括空格、大小写、引号、版本号（如"Font Awesome 6 Free"不可简写为"FontAwesome"） -
font-weight必须匹配：Solid 图标通常要900，Regular 图标用400 - 检查是否在伪元素或其父级上设置了其他
font-family，会覆盖继承链 - 确保字体文件已加载完成再应用样式，可用
font-display: swap避免闪白，但不能解决路径或命名错误
颜色和尺寸怎么随主题或响应式自动适配？
硬编码 color: #333 或 font-size: 14px 会让图标在深色模式或缩放时脱节。
- 用
color: currentColor让图标颜色自动继承父元素文字色，切换主题无需改 CSS - 用
font-size: 0.85em（而非固定像素）使图标尺寸随标题字号缩放，保持视觉比例 - 但注意：
currentColor对url()或background无效，SVG 图标需内联或使用fill="currentColor" - 如果图标需独立控制大小（如小圆点），优先用
width/height+background，避开字体缩放干扰
真正麻烦的不是写几行 CSS，而是所有依赖项必须同时成立：content 存在、display 正确、字体/路径/权重三者匹配、定位上下文就位——少一个，图标就消失，且浏览器不会报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
