必须设置content属性，否则::before不渲染；需配合display、font-family等确保图标正确显示、对齐与适配。
用 ::before 插入图标前必须设置 content
不写 content，::before 就不会渲染——这是最常被忽略的硬性条件。它的值可以是字符串、Unicode 字符（比如图标字体）、空字符串 ""（用于仅作样式容器），但不能省略。
- 写成
content: none;或直接不写，元素完全不可见 - 使用图标字体（如 Font Awesome）时，要查清对应图标的 Unicode 值，例如
content: "\f007"; - 用 SVG 作为背景图时，
content仍需设为""，否则背景可能被遮挡或错位
图标对齐和尺寸控制靠 display 和定位配合
::before 默认是 inline 级，直接设宽高无效；想精准控制大小、居中、间距，得先改显示类型。
- 常用做法：设
display: inline-block;或display: block; - 配合
vertical-align: middle;解决和文字基线不对齐问题 - 若父元素有
line-height，::before会受其影响，必要时重置为line-height: 1; - 用
transform: translateY(-50%);+top: 50%;可绝对垂直居中（需父元素position: relative;）
用字体图标时，font-family 和 font-weight 必须匹配
引入图标字体后，::before 里的 Unicode 能否正确显示，取决于是否准确继承或声明了字体族和字重。
- 检查图标字体是否已通过
@font-face加载成功（浏览器 Network 面板看字体文件请求） - 在
::before规则里显式写上：font-family: "Font Awesome 5 Free"; font-weight: 900;（注意不同版本字重不同） - 避免依赖继承：父元素的
font-family可能覆盖图标字体，导致显示成方块或问号
SVG 图标内联时，::before 无法直接放 HTML 标签
::before 的 content 只接受字符串或引用，不能插入真实 DOM 节点。想用 SVG 图标，得走背景图或 Base64 方式。
立即学习“前端免费学习笔记（深入）”；
icon::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z'/%3E%3C/svg%3E");
background-size: contain;
}
- Base64 编码太长易出错，推荐用 URL 编码（如上例）
- 注意 SVG 中的单引号、双引号、斜杠都要转义，否则
content解析失败 - 如果图标颜色需动态变化，用
mask+background-color比改 SVG 内容更可控
content、font-family、display 和编码细节里。 
