最常见原因是未设置content属性（如content: ""）或未声明display: inline-block/block，导致伪元素不渲染；此外父元素list-style、Unicode转义错误、font-family不匹配、图标字号未适配等也会导致图标不可见。
为什么 ::before 加 content 无法显示图标
最常见原因是没给 ::before 设置 display: inline-block（或 block），或者忘了设 content 值——哪怕只是空字符串 content: ""，缺了它伪元素就完全不渲染。
另外，如果父元素是 ul 或 li 且用了默认的 list-style，图标可能被原生项目符号遮挡或错位。
- 必须显式写
content: ""（哪怕不用内容） - 推荐加
display: inline-block，方便控制宽高、对齐和定位 - 把
li的原生符号关掉：list-style: none - 图标位置靠左时，用
position: absolute配合left+top更稳，但需确保li有position: relative
用 Unicode 字符做图标时，content 怎么写
Unicode 字符要写成十六进制转义形式，比如 ✅ 是 U+2705，就得写成 \2705（注意：反斜杠后不能有空格，位数不足补零，如 \e900 不是 \e90）。
别直接粘贴 emoji 到 CSS 里——不同系统/字体渲染不一致，还可能被压缩工具删掉。
立即学习“前端免费学习笔记（深入）”；
- 查 Unicode 码位推荐用 unicode-table.com
- 写法示例：
content: "\2705";（✅）、content: "\1F4C1";（?） - 配合
font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;提升兼容性 - 字号建议设为
font-size: 0.85em，避免撑开行高
用字体图标（如 Font Awesome）时，content 和 font-family 怎么配
Font Awesome 6+ 默认用 SVG，但若你仍用 Web Font 版本（fa-solid.css），就得靠 ::before + content + font-family 组合触发图标。
关键不是图标名字，而是它的私有 Unicode 码点。比如 fa-check 对应 \f00c，这个必须查官方 CSS 文件或文档确认，不能凭印象写。
- 引入字体 CSS 后，检查浏览器开发者工具里
::before是否加载了正确字体 -
content必须严格匹配字体定义的码点，例如：content: "\f00c"; -
font-family要写全名，如：font-family: "Font Awesome 6 Free";（注意空格和大小写） - Free 版需额外加
font-weight: 900（solid 图标），400是 regular
图标和文字之间间距不均匀？用 margin 还是 padding
用 margin。因为伪元素是行内级，padding 在水平方向有效，但垂直方向 padding 不影响行高；而 margin-right 可稳定控制图标与文字的距离，且不会干扰 line-height 计算。
如果图标用了 position: absolute，那就改用 left 值来调节横向偏移，此时 margin 失效，但能彻底脱离文档流，避免换行错位。
- 推荐组合：
display: inline-block; margin-right: 8px; - 绝对定位场景：
position: absolute; left: -20px; top: 50%; transform: translateY(-50%); - 避免用
text-indent或负margin-left推文字——易引发 RTL（从右向左）布局问题
font-size，但图标字体往往需要更小字号来对齐，而很多人只调了 font-size 却忘了同步调 line-height 或用 transform: scale() 微调视觉居中。 
