最可控方式是设 list-style: none 后用 background-image 精确控制图标位置与尺寸，需配合 padding-left 预留空间、background-position: 0 50% 垂直居中、background-repeat: no-repeat 防平铺。
ul/li 里用 background-image 替换默认圆点
直接改 list-style 为 none，再给 li 加 background-image 是最可控的方式。默认的 disc 或 circle 无法调色、缩放、对齐，而背景图能精确控制位置和尺寸。
常见错误是没设 padding-left 或 background-position，导致图标和文字重叠或错位：
- 必须设置
padding-left（至少大于图标宽度），否则文字会盖住图标 -
background-position推荐用0 50%实现垂直居中，比像素值更健壮 - 记得加
background-repeat: no-repeat，不然小图标会平铺
li {
list-style: none;
padding-left: 24px;
background-image: url("icon-check.svg");
background-repeat: no-repeat;
background-position: 0 50%;
}
用伪元素 ::before 插入 SVG 或 Unicode 图标
不用额外图片文件，适合简单图标（如 ✓、●、→）或内联 SVG。优势是可继承颜色、支持 currentColor，缩放不失真。
容易踩的坑是没重置 display 和 vertical-align，导致基线错位：
-
::before默认是display: inline，需设display: inline-block才方便控制宽高 - 用
vertical-align: middle对齐文本，否则图标常偏下 - 若用 SVG，推荐
background方式而非content，避免转义和编码问题
li::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
vertical-align: middle;
background: url("data:image/svg+xml,%3Csvg...%3E") no-repeat;
background-size: contain;
}
适配暗色模式时图标颜色自动反转
纯色图标（如用 background-color 或 border-radius 模拟）在暗色模式下可能看不见。真正可靠的方案是用 mask + background-color，让图标响应 color-scheme。
关键点在于：不要硬写死 #000 或 #fff，而是依赖当前文本色：
- 用
mask把 SVG 路径当蒙版，填色由background-color决定 - 配合
color-scheme: light dark声明，浏览器会自动切换color值 - 确保父级
ul或body有color-scheme声明，否则不触发
li::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-right: 0.5em;
-webkit-mask: url("icon-arrow.svg") no-repeat;
mask: url("icon-arrow.svg") no-repeat;
background-color: currentColor;
}
React/Vue 中动态切换图标类型要防重复渲染
在组件里根据 props 渲染不同图标时，别直接拼接 background-image: url(...) 字符串——CSS 会频繁重排，且 URL 缓存失效快。优先走 CSS 类名控制。
真实项目里容易忽略的是图标资源加载时机和 fallback：
- 用
className切换预定义类（如icon-success/icon-error），而不是内联 style - 所有图标 SVG 提前放在
<svg><defs></defs></svg>里，用<use href="#check"></use>引用，减少 HTTP 请求 - 加
loading="lazy"对非首屏图标，但注意background-image不支持该属性，得换方案
复杂点其实在状态同步：比如某个 li 的图标要随 API 返回值实时变，得确保 class 更新和 DOM 重绘节奏一致，否则闪动。这时候用 requestAnimationFrame 包一层切换逻辑反而更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
