用::before伪元素添加装饰图标需设置content属性，支持Unicode字符或Font Awesome等图标字体，并确保元素为非替换元素且具有行内表现；input等替换元素需设display:inline-block才生效。
用 ::before 伪元素给元素前面加装饰图标，核心是设置 content 属性并配合图标字体（如 Font Awesome）或 Unicode 字符，同时确保元素有定位上下文或行内表现。
确保元素支持伪元素
::before 只对 非替换的、设置了 content 的元素 生效。常见可添加伪元素的元素包括：div、p、span、li、h1–h6 等。注意：input、img、br 这类替换元素默认不支持 ::before（除非改为 display: inline-block 并手动触发）。
用 Unicode 字符插入简单图标
适合轻量场景，无需额外加载字体文件：
- 在
::before中用content: "★";插入星号 - 用
content: "\2714";插入对勾（Unicode 十六进制需加反斜杠和引号） - 配合
font-size、vertical-align或margin-right调整位置和大小
用图标字体（如 Font Awesome）插入矢量图标
前提：已引入 Font Awesome CSS（CDN 或本地）：
立即学习“前端免费学习笔记（深入）”；
- 指定字体族：
font-family: "Font Awesome 6 Free"; - 设置字体粗细（Solid 图标用
font-weight: 900;，Brands 用400） - 用 Unicode 写图标码，例如：
content: "\f00c";（对应 ✅ check） - 推荐加
display: inline-block;和margin-right: 6px;避免换行或间距异常
用背景图或 SVG 做更灵活的装饰图标
如果图标需缩放、着色或响应式控制，更适合用 background-image：
- 给元素本身设
padding-left预留空间 - 用
background: url("icon.svg") no-repeat left center / 1em 1em; - 避免伪元素限制，兼容性更好，且可直接用
currentColor控制颜色
本质上，::before 加图标不复杂但容易忽略 display 和 content 的配合；优先选 Unicode 或字体图标快速实现，复杂样式建议转向背景图方案。
