bootstrap 5 的 图标通过 font-size 调整大小最有效，如 fs-4 或 style="font-size: 18px"；不可用 width/height 或 .text-sm，因图标为字体渲染，且 font-size 必须直接作用于 标签。
Bootstrap 5 的 <i></i> 图标怎么调大小
Bootstrap 5 本身不自带图标集，你看到的 <i class="bi bi-x-lg"></i> 是来自 Bootstrap Icons（独立项目），它用的是 SVG 字体图标，所以缩放靠 font-size 最直接有效。
常见错误是给 <i></i> 加 width/height —— 没用，因为它是行内元素、靠字体度量渲染。也别套 .text-sm 这类语义类，它们不作用于图标字体。
-
fs-1到fs-6是最稳的选择，比如<i class="bi bi-trash fs-4"></i> - 需要非标准尺寸（如
18px）就写style="font-size: 18px"，但注意：必须加在<i></i>上，父容器设font-size不会继承到图标字体上 - 如果用了
bi-xxx-lg或bi-xxx-sm后缀类，它们只是预设的尺寸别名，本质也是改font-size，和fs-类共存时后者优先级更高
Font Awesome 图标为什么 font-size 不生效
多数情况是你没加 fa-fw（fixed-width）类，或者加载顺序错了。FA 的图标默认宽度不固定，font-size 虽然生效，但视觉上“变小了却没对齐”，误以为无效。
- 确保图标标签带
fa-fw：<i class="fas fa-user fa-fw fs-5"></i> - 检查 FA CSS 是否在 Bootstrap CSS 之后加载，否则
fa-fw的width声明可能被覆盖 - 别用
transform: scale()微调——它会破坏点击热区和父容器布局流，尤其在btn-group或input-group里容易错位
SVG 图标（自定义或 Bootstrap Icons）缩放要注意什么
SVG 图标本质是矢量图形，但嵌入方式不同，缩放逻辑完全不同：
- 如果是
<svg><use xlink:href="#icon-home"></use></svg>这种符号引用，得调width/height属性，font-size无效 - 如果是
<i class="bi bi-house"></i>（即通过伪元素 + 字体渲染），只认font-size和line-height，且建议保持line-height: 1避免上下偏移 - 用
background-image的老式雪碧图（如 Bootstrap 2.3.2）？那真得动background-size+width/height+background-position三者联动，font-size完全无效
为什么模态框里的关闭图标调小后位置偏了
不是图标没缩，是定位类没同步适配。Bootstrap 的 .btn-close 默认依赖 font-size 推算 width/height，你只改 font-size，但没重置 top/right 的偏移值，它就卡在原位置“露半截”。
- 推荐组合：给关闭按钮加
fs-4同时补position-absolute top-1 end-1（Bootstrap 5.3+） - 避免用
margin-top: -8px这类硬调——换字体或换主题后立刻失效 - 如果关掉
.btn-close改用自定义<i></i>，记得手动加cursor: pointer和aria-label="Close"，否则可访问性崩了
!important 也白搭。
