如何在HTML中给li标签添加小图标-html教程-PHP中文网

list-style-image是最轻量语义方案，但易因路径错误、尺寸不当或加载失败回退为默认圆点；推荐用::marker或background-image+list-style:none替代以获更好控制。

如何在html中给li标签添加小图标

用 CSS 的 list-style-image 直接替换默认项目符号

这是最轻量、语义最干净的方式，适合图标简单且不需要交互的场景。浏览器会把图片当作纯装饰性符号渲染，不增加 DOM 节点。

常见错误是路径写错或图片加载失败后回退为默认圆点，导致视觉不一致。

list-style-image 只作用于 li 的「标记区」，不影响 li 内容本身布局
推荐使用相对路径或 CDN 地址，避免绝对路径在本地测试时 404；例如：url("./icon-check.png")
图片尺寸不会自动缩放，建议提前切好 16×16 或 20×20 像素的图标，否则可能溢出或压扁
不支持伪元素动画，也不能响应 hover —— 想加交互就得换方案

用 ::before 伪元素 + background-image 精确控制图标位置

当需要微调图标对齐、留白、或者 hover 时改变图标颜色/大小，::before 是更灵活的选择。它本质是给每个 li 插入一个可样式化的“前缀盒子”。

容易踩的坑是忘记重置 list-style，导致原生符号和伪元素图标并存；还有定位偏移没设 vertical-align，造成文字基线错位。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

必须先写 li { list-style: none; }，否则原生符号还在
::before 默认是 inline 元素，推荐设 display: inline-block; + vertical-align: middle; 对齐文字
用 background-image 加 background-size: contain; 可适配不同尺寸图标，比 content: url() 更可控
如果图标是 SVG，直接用 content: url("data:image/svg+xml,...") 也能行，但编码过长影响可读性

用内联 SVG 替代图片路径，避免 HTTP 请求和尺寸失真

当图标数量少、需动态着色（比如 dark mode 切换）或要复用同一份矢量定义时，把 SVG 写进 HTML 最直接。它就是 DOM 的一部分，能被 JS 操作、CSS 选中、无障碍工具识别。

注意不要直接复制 Figma 导出的 SVG——常带多余 width/height 和命名空间，会导致缩放异常或渲染失败。

删掉 SVG 标签里的 width、height 属性，只留 viewBox，靠 CSS 控制尺寸
给 <svg></svg> 加 aria-hidden="true"，避免屏幕阅读器误读图形内容
如果多个 li 用同一图标，别重复粘贴 SVG，改用 <use href="#check-icon"></use> 引用 <defs></defs> 中定义的符号
SVG 内联后，可以用 fill: currentColor 让图标随文字颜色变化，省去单独维护色值

用字体图标（如 Font Awesome）快速插入，但要注意加载时机和语义

适合已有字体图标库的项目，一行 class 就能加图标，开发快。但实际加载延迟可能导致页面闪动（先显示文字，再渲染图标），且对屏幕阅读器不友好，除非手动补 aria-label。

很多人忽略字体图标本质是「文本字符」，所以行高、字号、垂直对齐全受字体度量影响，不是所有图标都能和文字严丝合缝对齐。

引入字体后，确保 font-display: swap;，防止图标阻塞首屏渲染
用 <i class="fa-solid fa-check"></i> 时，必须加 aria-hidden="true"，否则读屏软件会念 “fa solid fa check” 这种无意义字符串
不要把图标当背景图用（比如 content: "\f00c";），否则无法继承父级 font-size，缩放会失准
现代项目优先考虑 SVG 或系统图标，字体图标包体积大、定制性差，已逐渐被替代