用 font-size 控制 Font Awesome 图标尺寸最可靠，因其本质是字体；width/height 无效，fa-lg 等工具类本质是预设 font-size，需注意 line-height 和 vertical-align 对齐问题。
用 font-size 直接控制图标尺寸最可靠
font awesome 图标本质是字体，font-size 是唯一真正缩放图标的 css 属性。其他如 width/height 对 <i class="fa fa-home"></i> 完全无效——它不是图片，没有固有宽高。
常见错误：给 <i> 加 style="width: 24px; height: 24px;"，结果图标没变，只是容器空出一块白边。
- 行内写法（临时调试用）：
<i style="font-size: 24px" class="fa fa-home"></i> - CSS 类写法（推荐）：
.nav-icon { font-size: 1.5rem; }，然后加到标签上：<i class="fa fa-home nav-icon"></i> - 注意
rem会受根字体影响；如果项目改过:root { font-size: 18px; }，1.5rem就是 27px，不是默认的 24px
fa-lg、fa-2x 这类工具类怎么选
Bootstrap 本身不提供这些类，它们属于 Font Awesome 自带的尺寸工具类，但和 Bootstrap 共存时能直接用。
这些类本质就是预设的 font-size 值，按比例放大：
-
fa-lg≈ 原尺寸 × 1.33 -
fa-2x= 原尺寸 × 2 -
fa-3x到fa-5x依次递增，步长固定 - 别混用多个，比如
fa-2x fa-3x，后者会覆盖前者，但语义混乱，难维护 - 如果用了 Bootstrap 5 的
fs-*工具类（如fs-4），它只作用于文本元素，对<i>无效——fs-4不是为图标设计的
图标被裁剪或上下留白异常？先查 line-height 和 vertical-align
图标默认是内联元素，会受父容器的 line-height 和对齐方式影响。常见现象：图标顶部/底部被截掉，或者和旁边文字不对齐。
- 加
vertical-align: middle;或vertical-align: -0.125em;（Font Awesome 官方推荐偏移值）能解决多数对齐问题 - 如果父容器
line-height太小（比如line-height: 1），图标可能被压扁，适当调高（如line-height: 1.4） - 不要用
padding或margin“硬撑”留白——那只是掩盖问题，实际图标渲染区域仍受限 - SVG 图标（如 Font Awesome 6 的
@fortawesome/react-fontawesome）行为不同，它响应width/height，但传统<i>+ CSS 字体方式不适用
响应式场景下图标大小失效？重点检查选择器作用域
写了个 @media (max-width: 768px) { .navbar-brand .fa { font-size: 18px; } } 却没生效，大概率不是媒体查询错了，而是 DOM 结构不匹配。
- 打开浏览器开发者工具，点选图标，看它真实父级是不是
.navbar-brand；很多项目把图标放在<span>或<div>里，而那个容器才带.navbar-brand - Bootstrap 5 中
.navbar-brand默认无padding或line-height限制，但如果你用了自定义主题或老版本 CSS，可能残留min-height或display: flex布局干扰图标垂直居中 - 避免用
!important强行覆盖——它会让后续调试变成猜谜，优先提高选择器特异性，比如写成.navbar-brand i.fa而不是.fa
真正卡住人的从来不是“该用哪个类”，而是没意识到图标是字体、没看清它在 DOM 中的真实位置、也没验证父容器是否悄悄加了 line-height 或 flex 对齐规则。
