使用::before伪元素添加图标需设置content属性，配合Font Awesome等字体图标或Unicode/Emoji，注意元素display非none、避免替换元素及overflow裁剪，并通过font-family、vertical-align等控制样式。
用 ::before 伪元素给元素前面加图标，核心是设置 content 属性并配合字体图标（如 Font Awesome）或 Unicode 字符，同时确保元素具有定位上下文或正常流内可渲染。
确保元素支持伪元素
::before 只能作用于设置了 display 且不为 none 的元素。行内元素（如 span、a）默认支持；块级元素（如 div、p）也支持，但需注意：
- 若父元素设置了
overflow: hidden且伪元素超出，可能被裁剪 - 避免对
img、input等替换元素直接使用（部分浏览器不支持）
使用字体图标（推荐 Font Awesome）
引入 Font Awesome CSS 后，通过 content 插入对应 Unicode 字符，并指定字体族：
.icon-btn::before {
content: "\f007"; /* 用户图标 Unicode */
font-family: "Font Awesome 6 Free";
font-weight: 900; /* solid 图标需 900，regular 用 400 */
margin-right: 8px;
}⚠️ 注意：不同版本 Font Awesome Unicode 不同，务必查对应文档（如 v6 的 f007 是 user，v5 可能相同但字体名不同）。
立即学习“前端免费学习笔记（深入）”；
使用纯 Unicode 字符或 Emoji
无需额外字体，适合简单场景：
.label::before {
content: "★ ";
margin-right: 4px;
color: #ff6b35;
}
<p>.warning::before {
content: "⚠️";
margin-right: 6px;
}Emoji 在现代浏览器中兼容良好，但要注意字体渲染一致性；纯 ASCII 符号（如 >、•）更稳定。
控制样式与布局
::before 默认是 inline，常需手动调整对齐和尺寸：
- 加
vertical-align: middle让图标与文字垂直居中 - 设
display: inline-block方便设置宽高、背景色等 - 用
font-size控制图标大小，配合line-height微调基线 - 必要时用
position: absolute脱离文档流精确定位（需父元素position: relative）
不复杂但容易忽略细节：content 必须有值（哪怕空字符串 ""），字体加载延迟可能导致图标闪动，生产环境建议预加载字体或降级为 SVG 备用。
