<i>标签本义是表示不同语气或语义的文本（如外文词、术语），并非图标载体；项目中普遍用<i class="icon-home">是历史形成的工程妥协，因其行内、无内容、无边距，便于CSS伪元素渲染图标，但存在语义错误、无障碍干扰和SEO风险；推荐改用<svg>、带aria-hidden="true"的<span>或自定义元素替代。
<i> 标签本身不负责图标，它只是个语义中性的斜体容器；把 <i> 当图标载体，纯属历史惯用+工程妥协，不是标准推荐做法。
为什么项目里满屏都是 <i class="icon-home"></i>
这不是语义正确，而是 CSS 图标字体（如 Font Awesome、Iconfont）流行时期形成的事实标准：
- 空
<i>元素默认是行内、无内容、无边距，适合塞进伪元素::before渲染图标字符 - 比
<span>少敲 3 个字符，团队协作时“打字快”成了隐性优势 - 读屏器默认忽略空
<i>（尤其没aria-hidden="true"时），反而降低了无障碍干扰 - 但注意：HTML5 规范明确说
<i>应用于“不同语气或语义的文本”，比如外文词、术语、船名——不是图标
<i> 和 <em> 混用会出什么问题
两者浏览器默认都斜体，但语义完全不同，混用会导致：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 无障碍工具把图标当强调内容朗读（
<em>会被读作“强调”，<i>空标签可能跳过，但若加了文字就变成误读） - SEO 工具可能错误提取
<em>内容作为关键词权重，而图标本不该参与语义分析 - CSS 重置时若写
em, i { font-style: normal; }，图标字体的font-family可能被意外覆盖，图标变方块 - 真正该用
<em>的地方（比如“请务必检查配置”中的“务必”）如果被替换成<i>，语义降级
现代替代方案：什么时候该换掉 <i> 图标写法
如果你的项目已支持较新浏览器，且关注可访问性或长期维护性，优先考虑：
立即学习“前端免费学习笔记（深入）”；
- 用
<svg>内联图标：可控性强，支持aria-label、颜色继承、响应缩放，无字体加载失败风险 - 用带语义的
<span>+aria-hidden="true"：比如<span class="icon icon-search" aria-hidden="true"></span>，既规避语义污染，又比<i>更直白 - 用自定义元素（如
<icon name="search"></icon>）配合 Web Components：彻底解耦表现与语义，但需构建支持 - 如果必须用图标字体，至少加
aria-hidden="true"到<i>上，避免读屏器误读
真正难处理的从来不是怎么让图标显示出来，而是当产品开始做无障碍审计、国际化适配或 SEO 优化时，那些当年写着 <i class="icon-close"></i> 的地方，得一个个补 role="img" 和 aria-label——这时候才意识到，空 <i> 原来不是“省事”，是“埋点”。
