图标与文字垂直对齐需用vertical-align: middle优先，仍偏移则微调为-0.125em；字号用0.75em～0.9em相对单位；不同图标库需独立class定制对齐与缩放；响应式下坚持em/rem单位并真机验证。

图标和文字垂直对齐不上怎么办

常见现象是 首页

这类组合里，图标“浮”在文字上方或下沉，视觉上割裂。根本原因不是图标本身错位，而是行内元素默认按 baseline 对齐，而图标字体（如 Font Awesome、iconfont）的基线位置和普通文字不一致。

• 优先用 vertical-align: middle，比 top/bottom 更稳定，适合大多数图标字体
• 如果仍偏移，改用 vertical-align: -0.125em（约 1/8 字高），这是 Font Awesome 官方推荐的微调值
• 避免用 vertical-align: baseline —— 它会让问题更明显
• 若图标是 SVG 或 ，记得设 vertical-align: middle，否则会自带底部空白（由换行符导致）

字号比例失衡：图标太大或太小怎么调

直接写 font-size: 16px 给图标，常导致它比周围文字粗重、显眼。图标不是文字，但多数项目用字体图标，所以它的尺寸必须和当前文字形成合理比例，而非绝对像素值。

• 用相对单位：font-size: 0.875em（对应 14px / 16px）、0.75em（12p

  

  x）等，确保随父级字号缩放
• 推荐比例区间：图标字号取文字的 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。上线前务必在真机、不同系统字体渲染下交叉验证。