bootstrap icons 的 font-size 不生效是因为误用 svg/img 标签而非字体图标标签；只有 通过伪元素渲染才响应 font-size，width/height 无效且会引发布局错位，响应式需搭配基础尺寸类或相对单位。
Bootstrap Icons 的 font-size 为什么有时不生效
因为图标没被正确识别为字体图标——你可能误用了 <img src="icon.svg"> 或 <svg></svg>，却去调 font-size。只有 <i class="bi bi-x"></i> 这类通过伪元素 + 字体渲染的方式才响应 font-size。
常见错误现象：
- 加了
style="font-size: 24px"，图标大小不变，只看到行高撑开 - 父容器设了
font-size: 1.5rem，但图标没继承（字体图标不走常规继承链） - 用了
.text-sm或.fs-3，但图标在按钮或导航里“缩了却偏了”
真正起作用的写法只有两种：
-
<i class="bi bi-download fs-4"></i>（推荐，语义清晰、优先级可控） -
<i style="font-size: 1.75rem" class="bi bi-download"></i>（调试快，但避免在生产中大量内联）
注意：fs-* 类必须直接加在 <i></i> 上，套在 <span></span> 或 <button></button> 外层无效。
width/height 对 Bootstrap Icons 完全无效
字体图标不是块级图形，width 和 height 不控制其视觉尺寸，只影响行内盒模型占位。强行设置会导致空白区域错位，尤其在 <button></button> 或 <input-group></input-group> 里触发垂直对齐问题。
典型错误组合：
-
<i class="bi bi-trash" style="width: 20px; height: 20px"></i>→ 图标原样，周围多出白边 -
.bi { width: 1em; height: 1em; }→ 没用，且可能干扰line-height导致上下偏移
如果你看到“图标变小但位置歪了”，大概率是 width/height 干扰了默认的行内布局流。删掉它们，改用 font-size + line-height: 1 即可修复。
响应式图标大小怎么写才真有效
只写 fs-md-3 是不够的——Bootstrap 的响应式字体类必须带基础尺寸兜底，否则小屏下会回退到浏览器默认字号（常为 16px，甚至 0）。
正确叠加方式：
-
<i class="bi bi-house fs-3 fs-md-2 fs-lg-1"></i>：xs 用fs-3，md 起切到fs-2，lg 起再切到fs-1 - 不要只写
fs-sm-4，它表示 “sm 及以上都生效”，会覆盖更小断点的设置
更灵活的做法是用相对单位直接写：
-
style="font-size: 1.25rem"→ 随根字体变化，适合全局统一缩放 -
style="font-size: 1.5em"→ 随父容器字号变化，适合嵌套在<nav></nav>或<card></card>内部
硬写 px（如 font-size: 20px）就彻底失去响应能力，换设备或主题后立即失效。
混用图标类型时最容易踩的坑
一个页面里同时存在 <i class="bi"></i>、<svg></svg> 和 <img src="logo.svg">？那必须分三套逻辑控制尺寸，不能一招通吃。
对应方案：
-
<i class="bi"></i>→ 只认font-size，补line-height: 1防偏移 -
<svg width="1.5em" height="1.5em" viewbox="0 0 16 16"></svg>→ 必须有viewBox，width/height才能等比缩放 -
<img src="x.svg">→ 用width/height或max-width: 100%，font-size完全无效
最隐蔽的问题是：你以为在调图标大小，其实只是在调容器行高。打开开发者工具，看「Computed」面板里的 font-size 值是否真的变了——没变，就说明选择器没命中，或者根本不是字体图标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
