现代项目优先用 配合图标字体或 SVG 内联，禁用 <img>：因 <img> 易加载失败、缩放模糊、语义错误且对齐困难； + 字体轻量可缩放，SVG 内联可控性强、无障碍友好、颜色随文本自动变化。
按钮图标该用 <img> 还是 <i>？
直接说结论：现代项目优先用 <i> 配合图标字体（如 Font Awesome）或 SVG 内联，别用 <img>。因为 <img> 加载失败会出空白边框、无法缩放对齐、语义也不对——按钮里的图标不是独立内容，而是装饰性 UI 元素。
常见错误现象：<button><img src="icon.png">提交</button> 在高 DPI 屏幕模糊、文字垂直居中困难、禁用状态时图标不灰化。
-
<i>+ 图标字体：轻量、可缩放、支持伪类控制颜色/大小 - SVG 内联：最可控，无障碍友好，但 HTML 稍长
- 绝对避免用
background-image实现图标按钮——键盘焦点和屏幕阅读器无法识别图标
用 Font Awesome 快速加图标按钮（CDN 方式）
不用下载、不配构建工具，三步到位。关键是引入 CDN 后，<i> 标签必须带 class="fas fa-check" 这类完整类名，漏掉 fas（solid 风格）或拼错图标名，图标就显示成方块。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 去 Font Awesome 图标库 搜需要的图标，复制它的完整 class（比如
fa-download） - 在
<head>里加这行：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> - 按钮写法：
<button><i class="fas fa-download"></i> 下载</button>
注意：fas 是实心图标，far 是线框图标，混用会失效；v6 版本不再支持旧版 fa 单类名。
用内联 SVG 做更健壮的图标按钮
当项目不能外链字体、或需精确控制图标的描边/填充/动画时，SVG 内联是唯一可靠选择。它不依赖网络加载，禁用状态也能统一变灰，还能用 CSS 控制路径颜色。
示例（带 hover 变色）：
<button style="display: inline-flex; align-items: center; gap: 8px;">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M4 8L8 12L12 8M8 12V2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
刷新
</button>
关键点：
-
fill="none"+stroke="currentColor"让 SVG 颜色随按钮文字色自动变化 -
viewBox必须设，否则缩放失真 - 用
display: inline-flex和gap对齐图标与文字，比vertical-align更稳
按钮禁用时图标也要同步失效
很多人只给按钮加 disabled，但 <i> 或 SVG 不会自动变灰。必须用属性选择器强制处理：
实操写法（CSS）：
button:disabled .fa,
button:disabled svg {
opacity: 0.5;
cursor: not-allowed;
}
注意：opacity 会影响整个按钮，如果只想灰化图标、保留文字可读性，得把图标单独包一层 <span> 并单独选中；但多数场景下统一降权更符合用户预期。
真正容易被忽略的是键盘焦点：用 tab 切换到禁用按钮时，它不该获得焦点。确保用了原生 <button disabled>，而不是仅靠 pointer-events: none 模拟禁用——后者仍可被聚焦，且屏幕阅读器会误读。
