使用 CSS transform: scale() 替代直接修改 font-size，可避免破坏图标与文本的基线对齐和水平位置关系，从而实现多尺寸 FontAwesome 图标在 Bootstrap .fa-ul 列表中的精准垂直与水平对齐。
使用 css `transform: scale()` 替代直接修改 `font-size`，可避免破坏图标与文本的基线对齐和水平位置关系，从而实现多尺寸 fontawesome 图标在 bootstrap `.fa-ul` 列表中的精准垂直与水平对齐。
在 Bootstrap 4.6.2 与 FontAwesome 5.15.4 的组合中，.fa-ul 和 .fa-li 类本意是为列表项提供图标前缀支持，其默认样式依赖图标字体的自然排版特性（如 vertical-align: middle、line-height 和字体度量）。但若直接通过 font-size: 0.44em 等内联样式缩放图标，会强制改变该图标的行内盒模型尺寸，导致两个关键问题：
-
水平偏移：不同
font-size值使图标实际占据的em宽度不一致，而.fa-li的定位基于固定left偏移（通常由::before伪元素 +position: absolute实现），缩放后图标视觉中心偏离预设锚点； -
垂直错位：字体大小变化影响
baseline对齐基准，小尺寸图标因字形度量收缩更明显，常表现为上浮（即高于链接文字的中线）。
✅ 正确解法是采用 transform: scale() —— 它仅对渲染结果做几何缩放，不改变元素原始尺寸、行高或基线行为，因此 .fa-li 的定位逻辑依然有效，图标与后续 文本能保持稳定的相对位置。
以下是推荐写法（含完整示例）：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
⚠️ 注意事项：
-
scale()值为无单位数值（如0.8），非0.8em； - 若需兼容旧版浏览器（如 IE），可补充
-ms-transform: scale(0.8)，但 Bootstrap 4 已不官方支持 IE9 及以下； - 避免同时使用
font-size和transform: scale()，否则缩放叠加会导致不可控失真； - 如需响应式缩放，建议将
scale值提取至 CSS 类中，结合媒体查询控制，而非硬编码在style属性里。
通过 transform: scale()，你既能灵活控制图标视觉大小，又能完全保留 Bootstrap + FontAwesome 的原生对齐机制，真正实现“所见即所排”。
