按钮内图标与文字对不齐、下划线断开，根源在于 inline-block 图标与 inline 文本基线不一致；flex 布局（display: flex; align-items: center; gap: 8px）可彻底解决对齐与装饰问题。
按钮里文字和 Font Awesome 图标对不齐、间距乱、悬停下划线断开——不是图标库有问题，是默认渲染行为没被正确覆盖。
为什么 <i class="fas fa-home"></i> 直接塞进 <button></button> 会出问题
Font Awesome 的 .fas 元素默认是 display: inline-block，而按钮内纯文本是 inline。两者在行内流中基线不对齐，line-height 和字体度量差异直接导致图标“飘”在文字上方或被截断；更关键的是，text-decoration: underline 只能连续作用于 inline 元素，inline-block 会打断下划线。
-
<button class="btn"><i class="fas fa-download"></i> 下载</button>—— 图标顶部常被裁，文字下沉 - 加
vertical-align: middle有时管用，但依赖父元素line-height，换字体或缩放就失效 - 用
fa-2x放大图标？它按父级font-size缩放，可能撑爆按钮高度
display: flex 是最稳的图文混排方案
放弃纯文本流，把按钮变成 flex 容器，图标和文字作为独立子节点控制对齐，彻底绕过行内渲染陷阱。
- 给按钮加
display: flex; align-items: center; gap: 8px;（gap替代margin更可靠） - 图标和文字必须分开放：
<button><i class="fas fa-download"></i><span>下载</span></button> - 不需要额外设
vertical-align或调line-height，flex 自动居中 - 悬停下划线问题自然消失——因为文字和图标都成了 flex item，
text-decoration不再适用，改用border-bottom或背景色更可控
如果坚持用纯文本流，必须重置图标的显示模式
仅限简单场景（比如单图标+单行文字），且必须精准限定作用域。
- 写
button .fas, button .far, button .fab { display: inline; }，不能只写.fa（FA 6 已弃用该类名） - 配合
vertical-align: middle和微调margin-right（如margin-right: 6px） - 按钮需有明确
line-height（推荐line-height: 1.5），避免字体度量差异拉扯 - 禁用全局
.fas { display: inline }，否则导航栏、表格里的图标全乱套
真正难的不是让图标“出现”，而是让它在不同字号、不同缩放、不同悬停状态下一贯稳定——flex 方案看似多写两个标签，但省掉所有对齐调试时间；而硬调 inline 模式，本质是在和浏览器的行内格式化算法博弈，赢一次，下次换字体又输。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
