最推荐使用::marker伪元素替换默认项目符号，因其支持SVG内联、可缩放和着色；兼容性要求高时用background-image+padding-left；需交互效果则选::before；list-style-image因功能受限已不推荐。
用 list-style-image 替换默认项目符号
这是最直接的方式，适用于所有 <ul></ul> 或 <ol></ol> 列表项前统一换图。浏览器会把图片作为项目符号渲染，尺寸默认按原图大小，不随字体缩放。
- 图片路径必须可访问（推荐使用相对路径或 CDN 地址）
- 不支持 SVG 内联写法，
list-style-image: url("data:image/svg+xml,...")在部分旧版 Safari 和 IE 中失效 - 无法单独控制图标大小、垂直对齐或间距；若需微调，得配合
line-height和padding-left - 示例：
ul { list-style-image: url("icon-check.png"); }
用 ::marker 伪元素 + content 控制图标
现代方案（Chrome 86+、Firefox 80+、Safari 15.4+ 支持），能精确控制图标内容、大小和颜色，且天然支持 SVG 内联、Unicode 符号甚至渐变背景。
-
::marker只作用于<li>的标记区域，不影响文字内容 - 支持
content: url(...)或content: "✓"，也支持content: url("data:image/svg+xml,...") - 可设置
font-size缩放图标，color改变 SVG 颜色（前提是 SVG 使用fill="currentColor"） - 注意：不能用
background或transform，可用属性非常有限（content、color、font-*、text-align等）
用 background-image + padding-left 模拟图标
兼容性最好（IE8+ 都行），自由度最高，但需要手动管理图标与文字的间距和对齐。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给
li设置background-image，再用background-position定位图标（如left center） - 必须加
padding-left避免文字覆盖图标，值要大于图标宽度 + 间距（例如padding-left: 28px） - 图标默认不随
font-size缩放，要用background-size: contain或具体像素值控制 - 若列表项换行，文字会从第二行起始位置开始（即左对齐整个
li宽度），不是悬挂在图标下方 —— 这是和原生list-style最大区别
用 ::before 伪元素插入图标（推荐用于复杂定制）
灵活性最强，适合需要响应式图标、交互状态（hover/active）、或动态生成图标的场景。
立即学习“前端免费学习笔记（深入）”；
- 给
li::before设置content: ""，再通过background-image或content: url(...)插入图标 - 可用
position: absolute精确控制位置，配合top/left和transform微调 - 记得给
li加position: relative，否则::before会相对于最近定位祖先定位 - 容易踩的坑：
content值为空字符串时漏写引号（content: ""不可省略），以及忘记重置list-style: none导致原生符号残留
::marker；若要适配老浏览器或需 hover 动画，::before 更稳妥。图标尺寸和垂直居中往往是调试耗时最长的部分，建议先固定字体大小和行高再调图标位置。 
