Bootstrap分页箭头应替换为SVG图标而非«»实体，因其可缩放、填色、继承currentColor且语义完整；需用inline-flex布局+gap+min-width保障视觉一致与触摸热区。
Bootstrap分页箭头图标怎么换？别碰 « 和 » 字符
Bootstrap 5 默认用 HTML 实体 «（«）和 »（»）作上一页/下一页箭头，它们是纯文本，**无法用 font-size 单独放大、不能加颜色过渡、也不能设 vertical-align 微调位置**。强行改 .page-link font-size 会导致箭头和数字错位——因为数字是 12 等内联文本，而 « » 的行高继承和渲染基线跟数字不一致。
真正可控的做法是：用 SVG 或字体图标替换实体。例如：
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<svg width="16" height="16" viewBox="0 0 16 16">
<path d="M11.354 1.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L13.597 8 11.354 5.757a.5.5 0 0 1 0-.708z"/>
</svg>
<span class="visually-hidden">Previous</span>
</a>
</li>
- SVG 路径可缩放、可填色、支持
currentColor继承文字色 - 必须保留
aria-label或.visually-hidden，否则读屏软件只读“SVG”，不读语义 - 避免用
<i class="bi bi-chevron-left"></i>这类字体图标——如果 Bootstrap Icons 未加载或 CDN 失败，会留白或显示方块
为什么 font-size: 1.2rem 对箭头没反应？它根本不是字体
« 和 » 是 Unicode 符号，浏览器按当前 font-family 的字形表渲染，但多数中文字体（如 Noto Sans CJK、PingFang SC）里它们尺寸极小、字重轻、基线偏高。你设 font-size: 1.2rem，它确实放大了，但同时拉大了行高，导致箭头在按钮里“飘”在顶部，看起来像没变大。
验证方法：Chrome DevTools 选中 .page-link，看「Computed」里的 line-height 和 height 是否异常；再把鼠标悬停到 « 上，看 tooltip 显示的字符编码是不是 U+00AB —— 是的话，就确认它是符号，不是图标字体。
- 不要给
.page-link单独设line-height: 1，会压扁数字 - 若坚持用实体，统一用
display: flex; align-items: center;包裹内容，再对 SVG 或 span 做margin微调 - 全局禁用实体的最简方式：在 CSS 里写
.page-item:first-child .page-link::before, .page-item:last-child .page-link::after { content: none; }，然后用 JS 或模板引擎注入 SVG
怎么让左右箭头和数字按钮视觉大小一致？关键在 padding 和宽高约束
即使用了 SVG，如果只设 width: 16px，在 .pagination-lg 下它还是显得小——因为按钮整体 padding 是 0.75rem 1.5rem，而 SVG 默认 inline，垂直方向撑不满。
解决办法是统一控制容器行为：
.page-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem; /* 图标和文字间距 */
}
.page-link svg {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
}
-
inline-flex比inline-block更稳，避免 baseline 对齐抖动 -
gap替代margin，防止图标在:hover时因 margin 变化产生位移 -
flex-shrink: 0防止 SVG 在窄容器里被压缩（尤其移动端） - 如果用字体图标（如 Bootstrap Icons），确保加
font-size: inherit，否则它按根字体计算，不随.pagination-lg缩放
响应式下箭头图标要不要缩放？要看触摸热区是否达标
桌面端图标 16×16px 足够，但移动端手指点击需要 ≥44×44px 热区。单纯放大 SVG 到 24×24px 不够——如果父 .page-link 的 padding 没同步加大，热区仍是原来的尺寸。
正确做法是媒体查询内联动调整：
@media (max-width: 768px) {
.page-link svg {
width: 1.5rem;
height: 1.5rem;
}
.page-link {
padding: 0.75rem 1rem; /* 比默认 .pagination-lg 的 0.75rem 1.5rem 缩小横向，防挤出屏幕 */
}
.page-link:not(.disabled) {
min-width: 44px;
min-height: 44px;
}
}
- 别只放大图标，
min-width/min-height才是热区保障 -
.pagination-sm下更需警惕：它的默认padding: 0.375rem 0.75rem算下来热区仅约 6×12px，必须手动补min-width - 所有状态（
:hover、.active、:focus）的box-shadow和outline也要检查是否覆盖热区边界
事情说清了就结束。箭头图标的大小问题，本质是「符号 vs 图标」、「视觉尺寸 vs 触摸热区」、「全局缩放 vs 局部约束」三组矛盾的叠加。改一个地方，至少要同步动三个属性。
