list-style-image图标不显示主因是路径错误或尺寸不当；需确保路径相对于CSS文件、尺寸12×12~16×16px，且SVG在旧浏览器中不被支持；推荐用::marker伪元素替代以获得更好控制。
list-style-image 为什么图标不显示
直接写 list-style-image: url(arrow.png) 却看不到图，大概率是路径或尺寸问题。浏览器对 list-style-image 的支持很基础，不支持 SVG（部分旧版 Chrome/Safari 会 fallback 到默认符号），也不缩放图片——如果图标太大或太小，只会原样渲染或裁剪，视觉上像“没加载”。
- 路径必须相对于 CSS 文件位置，不是 HTML 页面；用绝对路径或 base64 更稳，比如
list-style-image: url(/assets/icon-check.svg) - 图标尺寸建议控制在 12×12 ~ 16×16px，过大时容易撑开行高、错位
- IE 和旧 Edge 不支持 SVG 作为
list-style-image，会直接忽略整条声明
用 ::marker 伪元素替换图标更可控
::marker 是现代方案，能精确控制内容、颜色、字体图标甚至 SVG 内联，且天然继承父级 color 和 font-size。
- 只适用于
<li>元素，不能用于自定义容器；老版本 Safari（ - 写法简单：
li::marker { content: "✓ "; color: #007bff; }，注意content后面带空格，否则文字会紧贴图标 - 想用字体图标？可以：
content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900;，但得确保字体已加载
完全自定义图标时，用 ::before + list-style: none
当需要悬停变色、动画、响应式缩放，或者列表项结构复杂（比如含多段文字），::before 是最灵活的选择。
- 必须先清掉默认标记：
li { list-style: none; }，否则原生符号和伪元素会重叠 - 定位靠
position: absolute或display: inline-flex配合gap，避免影响文本流；用vertical-align: middle对齐文字更稳妥 - 如果列表项有
padding-left，记得给::before留出空间，否则图标可能被遮挡
SVG 内联图标在 ::before 里怎么写
直接把 SVG 写进 content 会触发转义问题，正确做法是 URL 编码后用 url("data:image/svg+xml,...")。
立即学习“前端免费学习笔记（深入）”；
- 示例（一个 12px 宽的箭头）：
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23007bff' d='M4 2l4 4-4 4z'/%3E%3C/svg%3E"); - 编码工具推荐在线的 “SVG to Data URL”，别手敲，
%3C是，<code>%23是#，漏一个就失效 - 内联 SVG 不受 CORS 限制，也不依赖外部资源，但体积大了会影响 CSS 文件大小，简单图标才适合
::marker 足够用就别绕路；要兼容 IE？老老实实用 list-style-image + PNG；真要动效或复杂交互，::before 才是正解——但得记住清 list-style，不然调试半小时才发现是两个图标叠一起。 
