不能用往按钮里塞图标，因其默认vertical-align: baseline导致错位、撑高按钮、禁用态颜色不同步、点击区域变小；而字体图标和内联svg可继承color和font-size，配合currentcolor与inline-flex对齐，语义清晰且可控。
直接用 <button></button> 嵌套字体图标或 SVG，别用 <img>，否则对齐、禁用态、可访问性全崩。
为什么不能用 <img> 往按钮里塞图标
常见错误现象：<img> 默认 vertical-align: baseline，图标和文字上下错位；按钮高度被撑高；禁用时图标颜色不变；点击区域变小。
-
<img>是替换元素，对齐逻辑依赖行内盒模型，而按钮内部的文本行高、字体度量会干扰它 - 字体图标（如 Font Awesome）本质是文字，能天然继承
font-size、color和line-height - 禁用态只需统一设
color: currentColor就能灰化同步，<img>没这能力
<button></button> 里嵌 <i></i> 还是 <span></span> 更稳
推荐用 <span></span> 包裹图标，语义更清晰，也方便单独控制状态和间距。
-
<i></i>虽轻量，但语义上表示“斜体”而非“图标”，容易被读屏软件误读 -
<span aria-hidden="true"></span>明确告诉辅助技术这是装饰性内容 - 两个独立容器：一个包图标，一个包文字，比如
<span aria-hidden="true"><i class="fas fa-download"></i></span><span>下载报告</span> - 必须给
<button></button>设display: inline-flex（不是flex），否则align-items: center不生效
SVG 内联方式怎么写才不跳动、不偏移
心形、搜索、警告等图标，优先用内联 SVG，可控、无加载延迟、缩放不糊。
- 必须声明
viewBox="0 0 24 24"，否则缩放失真 -
fill写成currentColor，让图标随按钮color变色 - 避免设固定
width/height，用font-size: 1em+vertical-align: middle对齐文字基线 - 悬停动画用
transform: scale(1.1)，比改font-size更性能友好 - 点按后文字切换（如“关注”→“已关注”）时跳动，大概率是因为没设
line-height: normal或没统一父容器display: inline-flex
禁用态下图标颜色不同步的坑
很多人只写 button:disabled { color: #999; }，但图标在子元素里，不会自动继承颜色。
- 字体图标：必须显式重置
button:disabled span[aria-hidden="true"] { color: currentColor; opacity: 0.5; } - SVG 内联：得单独控制
button:disabled svg { fill: currentColor; } - 别漏掉
opacity: 0.5—— 仅靠颜色变浅不够，视觉上仍像可点击 - 如果用了 Web Font 图标（如 Font Awesome），确保 CDN 加载完成后再设禁用样式，否则有闪白风险
最易被忽略的是：禁用态下图标是否真的随文字一起灰化、是否保留足够点击热区、是否在高对比度模式下仍可辨识。这些细节不处理，按钮就算做出来了，也不算做完。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
