学习用HTML编辑网页实现无序列表项使用自定义图标-html教程-PHP中文网

推荐优先使用::marker伪元素替代list-style-image，因其支持svg内联、尺寸缩放与颜色继承；若用list-style-image，需注意路径正确、图标尺寸建议16px×16px或24px×24px，搭配list-style-position:inside时safari兼容性差。

学习用html编辑网页实现无序列表项使用自定义图标

如何用 `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 模拟。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

示例代码：

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;
}

注意事项：