content属性必须设置，否则::before或::after不渲染；值仅支持字符串、Unicode转义（如\2714）、url()或attr()；字体图标需严格匹配font-family与font-weight；display:inline-block和vertical-align:middle是确保可见与对齐的关键。
content 属性必须写，否则 ::before 或 ::after 根本不渲染——这是 90% 图标不显示的根源。
content 值只能是字符串、Unicode、url() 或 attr()
它不解析 HTML 标签，也不执行 JS。常见错误是把 这类写法直接塞进 content，结果只输出一串文字。
-
content: "✅"：系统 emoji，简单但 iOS/Android 渲染不一致，且无法单独着色 -
content: "\2714"：Unicode 转义（注意是\不是\u），查 unicode-table.com 可得，推荐用于箭头、勾选、分隔符等基础符号 -
content: url(./icons/arrow.svg)：路径相对于 CSS 文件位置；图标颜色和尺寸无法用 CSS 控制，需改 SVG 源文件 -
content: attr(data-icon)：从 HTML 元素读取data-icon属性值，比如，但不会自动映射成图标，只是原样输出字符串
用字体图标时 font-family 和 font-weight 必须严丝合缝
图标不显示，八成卡在这儿：不是“差不多就行”，而是要跟 @font-face 中声明的 font-family 完全一致（大小写、空格、引号都不能错），且 font-weight 必须匹配图标变体。
- Font Awesome 6 Free Solid 图标必须配
font-weight: 900，Regular 版本是400 - 查图标真实 Unicode：打开官方 CSS 文件，找类似
.fa-check::before { content: "\f00c"; }的声明，提取引号内值；content: "f00c"或content: "fa-check"都无效 - 浏览器开发者工具里检查
::before的 computed 样式，确认font-family确实生效，没被回退成serif
display、vertical-align 和定位必须手动配齐
伪元素默认是 display: inline，在 flex/grid 容器中可能尺寸为 0，或基线对不齐，导致“写了但看不见”。
- 加
display: inline-block是标配：不然width/height无效，margin在某些浏览器表现异常 -
vertical-align: middle比top: -2px更可靠，能稳定对齐文字行高，不受font-size变化影响 - 若用
position: absolute，父元素必须设position: relative，否则图标会相对于body定位，飞到页面右上角 - 记得预留空间：用
padding-right或margin-right避免文字被遮挡
最常被忽略的是：即使只插一个空格或点，也得写 content: ""；而本地开发时字体路径错、CORS 没配，控制台报 Failed to decode downloaded font，图标必然空白——这两处不排查，调样式毫无意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
