Bootstrap 5 响应式图标大小修改 IconFontSize-Bootstrap教程-PHP中文网

Bootstrap Icons 的 font-size 必须用响应式字体类（如 fs-3 fs-md-2）叠加，且需基础类兜底；推荐用 rem/em 单位配合父容器字号或 CSS 变量实现真响应式。

bootstrap 5 响应式图标大小修改 iconfontsize

Bootstrap Icons 的 font-size 不响应断点？因为类没叠加对

Bootstrap Icons 是字体图标，大小只认 font-size，不认 width 或 height。你写了 fs-md-3 却没生效，大概率是断点类没按顺序叠加，或者压根没加基础字号类。

Bootstrap 5 的响应式字体工具类（如 fs-*）必须从小到大叠加才有效：fs-4 fs-md-3 fs-lg-2 表示：xs 断点用 fs-4，md 起切到 fs-3，lg 起再切到 fs-2。如果只写 fs-md-3，xs 断点下没有默认字号，浏览器会回退到继承值（可能极小或为 0）。

必须带一个无断点前缀的基础类（如 fs-3），否则小屏无 fallback
fs-sm-4 不代表“仅在 sm 生效”，而是“sm 及以上都生效”，所以它会覆盖前面的 fs-3
图标若放在 .navbar-brand 或 .btn 里，注意这些组件自身有 font-size 继承链，可能干扰你的类

用 `em` 或 `rem` 替代 `px` 才真能随容器缩放

硬写 style="font-size: 24px" 或 .bi { font-size: 24px } 就锁死了尺寸，和响应式无关。真正让图标“跟着文字一起变”的，是相对单位。

推荐直接在图标元素上设 font-size: 1.25rem 或 font-size: 1.5em —— 前者随根字号变化，后者随父元素字号变化。只要父容器（比如 .nav-link 或 .list-group-item）的字号响应了断点，图标就自动响应。

别用 vw：小屏下易缩太小，且和文字节奏脱节
避免 transform: scale()：破坏垂直对齐，hover 时容易跳位
SVG 图标若用 <svg></svg> 标签而非字体图标，记得加 width: 1em; height: 1em; 并移除原始 width/height 属性

媒体查询里改 `font-size` 没反应？先查计算值和继承链

写了 @media (max-width: 768px) { .bi { font-size: 18px; } } 却没变，不是语法错，而是 CSS 优先级或继承被截断了。

打开浏览器开发者工具，选中图标元素，看「Computed」面板里的 font-size 值是多少、来源是哪条规则。常见卡点：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

图标被更具体的类覆盖，比如 .navbar-brand .bi 比单纯 .bi 优先级高
父容器（如 .navbar-brand）本身 font-size 是 inherit，但它的父级没设字号，导致整条链失效
用了 display: inline（默认），但行内元素在某些布局中受 line-height 挤压，视觉上像没变

最稳解法：直接给图标容器设字号，例如 .nav-item { font-size: 1.125rem; }，让所有子图标自然继承。

想全局统一控制图标大小？用 CSS 自定义属性

项目里图标散落在导航、按钮、卡片各处，一个个加类太累？用 :root 变量 + 媒体查询，改一处，全盘响应。

在全局样式末尾加：

:root {
  --icon-font-size: 1.25rem;
}
.bi {
  font-size: var(--icon-font-size);
}
@media (max-width: 768px) {
  :root {
    --icon-font-size: 1.125rem;
  }
}
@media (max-width: 480px) {
  :root {
    --icon-font-size: 1rem;
  }
}