推荐用::marker（现代可控）、其次::before（灵活兼容）、再background-image（稳妥兜底）、最后list-style-image（限制多易失效）。
用图片当列表项图标，有四种主流方法，按推荐度从高到低排列：优先用 ::marker（现代、可控），其次用 ::before（灵活、兼容好），再考虑 background-image（稳妥、老项目适用），最后才用 list-style-image（限制多、易失效）。
✅ 推荐：用 ::marker 插入图片（支持内联 SVG + 自动缩放）
这是目前最干净、语义最正的方式，适合 Chrome 86+、Firefox 89+、Safari 15.4+ 等现代浏览器：
- 直接在
li::marker中用content: url(...)引入图片或内联 SVG - 图标会随
font-size缩放，color可控制 SVG 填色（前提是 SVG 使用fill="currentColor"） - 不依赖外部路径，无 CORS 问题；也不受父元素
margin-left影响 - 示例：
li::marker {<br> content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");<br> font-size: 1.2em;<br> color: #28a745;<br>}
? 灵活方案：用 ::before 伪元素（支持交互与响应式）
需要悬停变色、动画、或图标尺寸随屏幕变化时，这是唯一可靠选择：
- 先清除原生符号：
li { list-style: none; } - 给
li::before设置content: ""，再通过background-image或content: url(...)加图标 - 用
position: absolute精确定位，记得给li加position: relative - 文字换行后自动左对齐整行，不会“挂在图标下”，需靠
padding-left预留空间
? 兼容兜底：用 background-image + padding-left
要支持 IE8 或老旧环境时可用，自由度高但需手动对齐：
- 设置
ul { list-style: none; }避免冲突 - 为
li添加背景图：background: url("check.png") no-repeat left center; - 用
padding-left留出足够空间（建议 ≥ 图标宽 + 6px），例如padding-left: 26px; - 若图标太大，加
background-size: 12px auto;控制尺寸
⚠️ 慎用：list-style-image（路径敏感、功能受限）
虽然写法最简单，但实际项目中容易出问题：
- 只作用于
ul或ol，不能设在li上 - 图片路径是相对于 CSS 文件位置，不是 HTML 页面，极易 404
- 不支持内联 SVG（
url("data:image/svg...")在旧 Safari/IE 失效） - 图标大小固定，无法随字体缩放；垂直对齐难调，常需搭配
line-height和padding-left - 如果父容器设置了
margin-left: 0，图标可能被直接裁掉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
