使用 list-style-image 设置自定义图标，需注意尺寸与格式；2. 用 background-image 替代默认样式，灵活控制图标位置；3. 推荐伪元素结合字体图标，确保颜色一致且可缩放；4. 重置 ul/ol 的 margin 和 padding 避免浏览器差异。现代开发首选伪元素+字体图标方案，兼容性好且易于维护。
要实现 CSS 中列表图标样式的统一，关键在于控制 list-style 和 background-image 或使用伪元素来定制图标。以下是几种常用方法，确保不同浏览器和设备上显示一致。
1. 使用 list-style-image 统一图标
通过 list-style-image 可以设置自定义图片作为列表项的标记，但需注意图片尺寸和对齐问题。
建议：- 确保图标大小适中（通常 12x12 到 16x16 像素）
- 使用 PNG 或 SVG 格式保证清晰度
- 测试在不同背景色下的可见性
示例代码：
ul {
list-style-image: url('icon.svg');
}
2. 使用 background-image 替代默认样式
更灵活的方式是取消默认标记，用背景图控制图标位置和样式。
立即学习“前端免费学习笔记（深入）”；
操作步骤：- 将 list-style 设为 none
- 为 li 添加 padding-left 留出图标空间
- 设置 background-image 并调整 position
示例代码：
ul {
list-style: none;
padding-left: 0;
}
li {
padding-left: 20px;
background-image: url('bullet.svg');
background-repeat: no-repeat;
background-position: left center;
background-size: 14px 14px;
}
3. 使用伪元素和字体图标（推荐）
结合 Font Awesome 或自定义图标字体，通过 ::before 实现高一致性图标。
优势：- 图标颜色跟随文本 color
- 支持缩放不失真
- 易于修改大小和间距
示例代码：
li {
position: relative;
padding-left: 20px;
}
li::before {
content: "•";
font-family: 'FontAwesome';
content: "\f00c";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
color: #333;
}
4. 重置默认样式避免差异
不同浏览器对 ul/ol 的 margin 和 padding 处理不同，需先重置。
通用重置建议：
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
基本上就这些。选择哪种方式取决于项目是否引入图标字体、性能要求以及维护成本。使用伪元素 + 字体图标方案在现代开发中最为常见和可控。
