语义正确、图标可控、状态同步是核心：用嵌套和文字，fa6或svg内联，flex对齐，disabled时用currentcolor同步灰化。
用 <button></button> 标签结合图标库做带图形的复合按钮，核心是“语义正确 + 图标可控 + 状态同步”。不推荐用 <img> 塞图标，也不该把文字塞进 <i></i> 里——既破坏可访问性，又难对齐、难灰化。
选对图标载体：字体图标 or SVG 内联
优先用 Font Awesome（FA6）或 SVG 内联：
- FA6 引入后直接写
<i class="fas fa-download"></i>，注意前缀已变：solid 用fas，brand 用fab - SVG 内联更轻量、无加载延迟，路径要精简，必须带
viewBox="0 0 24 24"和aria-hidden="true" - 别用
<img src="icon.png">：默认 baseline 对齐会错位，禁用时颜色不变，还多一次请求
结构写法：按钮内嵌独立容器
图标和文字要分开放，方便单独控制样式与状态：
- 推荐结构：
<button><span aria-hidden="true"><i class="fas fa-heart"></i></span><span>关注</span></button> -
aria-hidden="true"加在图标外层容器上，避免屏幕阅读器重复读“心形图标” - 文字单独包一层
<span></span>，不塞进<i></i>，保障 SEO 和语义清晰
对齐与尺寸：用 flex 而非 line-height
让图标和文字垂直居中，关键不是调 line-height，而是让按钮成为真正的 Flex 容器：
- 给
<button></button>设display: inline-flex（不是flex），避免它变成块级破坏行内流 - 子元素自动参与对齐，再加
align-items: center就稳了 - 图标大小用
font-size: 1em，文字缩放时图标同比例变化；间距用gap: 0.5em，IE 回退为margin-right: 0.5em
禁用态与颜色同步：别只改按钮文字色
加 disabled 属性后，浏览器禁交互但不自动灰化图标：
- 必须写 CSS：
button:disabled span[aria-hidden="true"] { color: currentColor; opacity: 0.5; } - 若用 SVG，还要加：
button:disabled svg { fill: currentColor; } - 用
currentColor是关键——它继承按钮当前的color，换主题色时图标自动响应
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
