bootstrap icons 的 font-size 缩放仅对字体图标有效；inline svg 需 width/height + viewbox 控制缩放；背景图 svg 则依赖 background-size，混用方式易致变形。
Bootstrap Icons 的 font-size 缩放只对字体图标有效
当你写 <i class="bi bi-download"></i>，它本质是伪元素 + 字体字符，所以 font-size 确实能放大整个图标。但前提是：你用的是 CSS 类名方式引入（即加载了 bootstrap-icons.css），且没覆盖 font-family 或 line-height 导致字符错位。
常见错误包括：
- 在
.navbar-brand里混用了<img src="logo.svg">和<i class="bi bi-x"></i>，却统一设font-size: 1.5rem—— 图片尺寸完全不变，只撑高行高 - 父容器设置了
display: flex; align-items: center，但图标因line-height不匹配而上下偏移，误以为是缩放问题 - 用了
vertical-align: middle却忘了字体图标默认基线对齐，需配合line-height或transform: translateY()微调
Inline SVG 的缩放靠 width/height + viewBox
直接把 SVG 写进 HTML（比如复制 <svg><path fill="currentColor" d="..."></path></svg>）时，font-size 完全无效。真正起作用的是：width、height 和必须存在的 viewBox 属性。
没有 viewBox 会导致缩放失真——浏览器失去坐标系参考，等比缩放失效，图标被拉伸或裁剪。
推荐写法示例：
<svg width="1.5em" height="1.5em" viewbox="0 0 16 16" fill="currentColor"><path d="M8 1.314c..."></path></svg>
这里用 em 单位可响应父级文字大小，fill="currentColor" 让颜色随 color 变化，viewBox 锁定原始比例。
用 background-image 加 SVG 时，缩放由 background-size 控制
如果你把 SVG 当作背景图引用（如 background-image: url("icon-download.svg")），那控制尺寸的就不是 width/height，而是 background-size。
常用组合：
-
background-size: 1rem 1rem：固定像素尺寸，适合图标大小稳定场景 -
background-size: contain：等比缩放至完全可见，可能留白 -
background-size: cover：等比缩放至完全覆盖，可能裁剪边缘
注意：此时无法用 currentColor 动态变色，SVG 文件里的 fill 是硬编码值；想换色只能准备多份不同色 SVG，或改用 inline SVG。
缩放方式选错，80% 的“图标变形”问题就已注定
很多人调试半天发现图标模糊、错位、不居中，最后发现只是把 <img src="x.svg"> 当成字体图标去调 font-size，或者给 inline SVG 漏写了 viewBox。
更隐蔽的问题是：同一项目里混用三种方式（字体类名、inline SVG、背景图），又没统一尺寸基准（比如有的用 16px，有的用 1.25rem，有的靠 em 继承），导致视觉节奏断裂。
真正要盯住的不是“怎么放大”，而是“图标以什么形式存在”和“它的尺寸锚点在哪”。查 DOM 结构、看 computed styles、确认是否带 viewBox 或是否加载了字体文件，比盲目调参快得多。
