推荐优先使用::marker伪元素替代list-style-image，因其支持SVG内联、尺寸缩放与颜色继承；若用list-style-image，需注意路径正确、图标尺寸建议16px×16px或24px×24px，搭配list-style-position:inside时Safari兼容性差。
如何用 list-style-image 替换默认圆点
直接用 CSS 的 list-style-image 最简单，但浏览器兼容性和图标尺寸控制容易出问题。它会把图片原样铺在列表项左侧，不自动缩放，也不随文字大小变化。
实操建议：
- 图片路径必须正确，推荐用相对路径如
./icons/arrow.svg，避免绝对路径或 URL 未加载导致空白 - 图标尺寸建议设为
16px × 16px或24px × 24px，太大时会撑开行高、错位 - 搭配
list-style-position: inside可让文本对齐更可控，但注意 Safari 对inside+list-style-image支持不稳定 - 别忘了加
alt文本的语义补充（虽然list-style-image不支持alt，但可用aria-label或辅助性span补充）
用 ::marker 伪元素精准控制图标样式
::marker 是现代方案，支持 SVG 内联、尺寸缩放、颜色继承，且不影响布局流。但它不支持 IE 和旧版 Safari（
典型写法：
立即学习“前端免费学习笔记（深入）”；
li::marker {
content: url("./icons/check.svg");
font-size: 1.2em;
}关键点：
-
content只接受url()、string或counter()，不能写 HTML 标签 -
font-size会缩放整个 marker，包括 SVG 图标；但 SVG 若含固定width/height属性，可能被忽略 - 若想让图标随文字变色，SVG 必须用
fill="currentColor"，否则颜色不会继承
用背景图 + padding-left 实现最大兼容性
这是最稳的 fallback 方案，适用于需要支持 IE11 或老旧安卓 WebView 的场景。本质是取消默认 marker，用 background-image 模拟。
示例代码：
ul.custom-icon {
list-style: none;
padding-left: 0;
}
ul.custom-icon li {
background: url("./icons/dot.png") no-repeat left center;
padding-left: 28px; /* 图标宽 + 间距 */
background-size: 16px;
}注意事项：
-
background-position推荐用left center而非像素值，避免字体大小变化时错位 -
padding-left值 = 图标宽度 + 期望间距，比如图标 16px 宽，留 8px 空隙，就设 24px - 多行文本时，第二行不会自动缩进——需加
text-indent或用display: flex重构结构
SVG 内联图标比 PNG 更灵活但要注意路径
内联 SVG 可直接用 content: url("data:image/svg+xml,...")，免 HTTP 请求，也支持动态着色。但 URL 编码容易出错，尤其含空格或 #。
安全做法：
- 用在线工具（如 SVGOMG）压缩 SVG 后手动编码，或用 JS 构建 data URL（开发阶段可接受）
- 避免在 SVG 中使用外部引用（如
<image href="...">），data URL 不支持跨域资源 - 如果图标要响应文字颜色，确保 SVG 中所有
fill都设为currentColor，且无硬编码色值
真正麻烦的是图标和文字基线对齐——vertical-align 在 ::marker 里无效，只能靠 background-position 或调整 SVG 的 viewBox 和内容位置来微调。
