图标与文字垂直对齐需用vertical-align: middle优先，仍偏移则微调为-0.125em；字号用0.75em～0.9em相对单位；不同图标库需独立class定制对齐与缩放；响应式下坚持em/rem单位并真机验证。
图标和文字垂直对齐不上怎么办
常见现象是 <i class="icon-home"></i>首页
baseline 对齐，而图标字体（如 Font Awesome、iconfont）的基线位置和普通文字不一致。- 优先用
vertical-align: middle，比top/bottom更稳定，适合大多数图标字体 - 如果仍偏移，改用
vertical-align: -0.125em（约 1/8 字高），这是 Font Awesome 官方推荐的微调值 - 避免用
vertical-align: baseline—— 它会让问题更明显 - 若图标是 SVG 或
<img>，记得设vertical-align: middle，否则会自带底部空白（由换行符导致）
字号比例失衡：图标太大或太小怎么调
直接写 font-size: 16px 给图标，常导致它比周围文字粗重、显眼。图标不是文字，但多数项目用字体图标，所以它的尺寸必须和当前文字形成合理比例，而非绝对像素值。
- 用相对单位：
font-size: 0.875em（对应 14px / 16px）、0.75em（12px）等，确保随父级字号缩放 - 推荐比例区间：图标字号取文字的
0.75em～0.9em，标题旁图标可用0.875em，按钮内用0.75em - 别单独给图标设
line-height—— 容易破坏整体行高节奏；统一靠父容器的line-height控制 - 如果用了 SVG Sprite，
width/height应设为1em，再配合vertical-align: middle
不同字体图标库的 baseline 差异怎么处理
Font Awesome、iconfont、Bootstrap Icons 各自生成的字体文件，字形绘制区域和基线位置不同。同一段 CSS 在不同库下表现可能不一致，不能一套规则打天下。
- Font Awesome 5+：默认适配良好，
vertical-align: middle+font-size: 0.875em基本可用 - iconfont（阿里图标库）：常偏高，建议加
vertical-align: -0.1em并测试不同字号下的对齐 - Bootstrap Icons：推荐用其内置类
bi+bi-16等尺寸类，比手写 CSS 更可靠 - 最稳妥方式：为每套图标定义独立 class，例如
.icon-fa、.icon-ifont，分别调试对齐与缩放
.icon-fa {
font-size: 0.875em;
vertical-align: middle;
}
.icon-ifont {
font-size: 0.8125em; /* 13px */
vertical-align: -0.1em;
}响应式场景下图标文字比例突然崩坏
媒体查询中只改了文字 font-size，但忘了同步调整图标尺寸，结果小屏下图标显得巨大，大屏下又缩成点。比例断裂往往发生在断点切换时。
立即学习“前端免费学习笔记（深入）”；
- 图标字号始终用
em或rem，不要用px或vw - 如果父容器用了
clamp()控制字号，图标会自动跟随 —— 前提是它的font-size是相对单位 - 慎用
transform: scale()单独缩放图标，它会破坏点击热区和对齐基准 - 在
@media中只需调整根字号（html { font-size }）或组件级字号，图标会自然响应
实际项目中最容易被忽略的是：图标对齐不是一次调完就一劳永逸的事，它依赖字体加载顺序、父容器 line-height、甚至是否启用了 font-display: swap。上线前务必在真机、不同系统字体渲染下交叉验证。
