[data-ext]配合::before是最轻量可控的图标方案，需统一小写扩展名、必设content: ""、避免font-family硬编码，并用vertical-align或inline-flex精准定位；字体失效时应通过@supports检测并内联svg fallback。
用[data-ext]配合::before是最轻量且可控的方案
直接在HTML元素上写data-ext="pdf"，再用属性选择器匹配并注入图标，不依赖JS动态加class，也不用维护一堆.file-icon-pdf类名。这种方式渲染快、可复用、调试直观。
常见错误是把扩展名写成大写（如data-ext="PDF"），而CSS选择器默认区分大小写；或忘记重置content导致文字被覆盖。
- 扩展名统一转小写后再写入
data-ext（服务端或JS里做） - 所有
::before规则必须带content: ""，否则伪元素不渲染 - 避免用
font-family: "FontAwesome"硬编码字体名，改用更稳定的font-family: var(--icon-font)
[data-ext="jpg"]::before这类选择器的性能与兼容性边界
属性选择器本身无性能问题，但当文件类型超过50种、且每个都写一条独立规则时，CSS文件体积和浏览器样式计算开销会上升。IE11及以下不支持::before在某些替换元素（如<img>）上生效，所以别把它用在<img data-ext="png">上——应包裹一层<span></span>。
- 推荐按类型分组：用
[data-ext~="image"]匹配空格分隔的多值（需JS写入data-ext="image jpg"） - 移动端Safari对
font-display: swap加载中的图标有短暂空白，建议预加载关键字体 - 若项目已用Tailwind，可用
peer-[data-ext="pdf"]:before:...实现条件图标，但需开启JIT模式
图标定位偏移经常错位，top/transform怎么选
用top: -2px这类绝对偏移，在不同字号或行高下极易失准；transform: translateY(-20%)相对稳定，但前提是父元素line-height固定。最稳妥的是用vertical-align: middle + font-size微调，因为图标本质是内联文本。
- 优先设
display: inline-flex父容器，再用align-items: center垂直居中 - 若必须用
::before，给它加vertical-align: text-bottom比middle更可靠 - 避免同时设置
top和transform，后者会覆盖前者，且触发重排
字体图标 fallback 到 SVG 的实际落地方式
当用户禁用字体或网络字体加载失败时，纯content: "\f1c1"会显示方块或空白。不能只靠@font-face的font-display: optional，得主动降级。
- 用
@supports (content: "a") and (font-family: "icons")做特性检测，嵌套写fallback规则 - SVG fallback建议用
background-image: url("data:image/svg+xml,...")内联，避免额外请求 - 不要用
src: url(...) format("woff2"), url(...) format("svg")这种过时写法，SVG字体已基本废弃
[data-ext="zip"]::before，而是让所有扩展名在各种缩放、暗色模式、高对比度设置下都保持清晰可辨——这要求你把图标尺寸、颜色变量、字体加载状态全纳入CSS自定义属性体系，而不是散落在各处硬编码。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
