5.3 图标库与主题模板

5.3 图标库与主题模板

bootstrap-icons 是官方配套的 SVG 图标库（两千枚上下，持续增补），三种引入方式对应三种体重；主题与模板生态则提供成套的起点页面。本节前半立图标的选型与用法，后半立模板的「借力而不受制」原则——这是定制章的生态补给案。

位置：定制章第三案。5.1、5.2 改的是框架本身，本节取的是官方与社区的外援——图标几乎是每个真实项目都要面对的判例。

图标三种用法：字体、SVG 内联、精灵图

三种用法的裁决表：

图标与组件的合判

<!-- 图标按钮：aria-label 补语义，图标本身对读屏隐藏 -->
<button class="btn btn-outline-secondary" aria-label="搜索">
  <i class="bi bi-search" aria-hidden="true"></i>
</button>

<!-- 图标 + 文字的导航项：gap 替代手写间距 -->
<a class="nav-link d-flex align-items-center gap-2" href="#">
  <i class="bi bi-grid-3x3-gap" aria-hidden="true"></i>栅格实验
</a>

<!-- 装饰与语义的分工：纯装饰图标 aria-hidden，承载语义时给文字 -->
<span class="badge text-bg-warning d-inline-flex align-items-center gap-1">
  <i class="bi bi-exclamation-triangle" aria-hidden="true"></i>待支付
</span>
​

图标无障碍的铁则一条：图标要么对读屏隐藏（配文字承载语义），要么自带可读名称（aria-label）。裸图标按钮是读屏用户的死胡同——6.2 节还会再审此案。

主题与模板：起点的价值与陷阱

生态里的「主题」有两类。一类是换皮主题：重设色板、圆角、字体的成品样式包，装上即得一套视觉；另一类是页面模板：官网、后台、落地页的整套 HTML，拿来改内容就能上线。选型判据三条：

1. 看维护活跃度：主题锁死的框架小版本与你项目版本差一个大版本，类名对不上号，省的时间加倍还回去；
2. 看定制度天花板：模板写得越「满」（大量专属类、深度改写组件结构），后续按 5.1/5.2 的路线定制时阻力越大；
3. 看依赖清单：有的模板在 Bootstrap 之外再叠 jQuery 插件、重型动画库，体积与冲突风险同步上升。

💡 关键直觉：模板的正确用法是「抄结构与判例」而非「整个搬走」。把模板里导航栏的断案、卡组的排法读明白，用官方组件与工具类重写一遍，你得到的是零债务的页面；直接搬走，你得到的是一份看不懂的遗产。

案例：给第 3 章的收货表单配图标

背景：3.2 节的地址表单上线后，用户反馈「字段太多，视觉疲劳」。设计要求给每个字段配图标，且不引入新依赖。

操作：选定字体方案（项目已引 CDN，一个 link 成本最低）；每个 label 改为 d-flex align-items-center gap-2，前插 bi bi-person（姓名）、bi bi-geo-alt（省市）、bi bi-house（地址）图标；提交按钮内加 bi bi-check2。

结果：表单视觉分组感明显增强，扫描速度提升；图标随 label 的字号色阶联动，暗色模式下无需任何额外处理。

解读：图标字体与文字共享 currentColor，所以 4.2 节的颜色判决、4.3 节的字号判决对图标全部生效——这是「体系内图标」相对散装图片图标的核心红利。

变式：若后续图标涨到三十枚以上，重判精灵方案：全站图标集中到一个 svg 登记文件，用法三的 use 引用；两案迁移成本低，因为类名结构不变，只换标记形态。

精灵方案落地：三步迁移

裁决表把精灵判给「二三十枚图标以上的产品站」，落地的三步值得展开——它是三种用法里唯一需要动手组织的：

<!-- 第一步：全站图标集中登记在一个隐藏的 svg 容器里（示意两枚，真实项目放页尾） -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="ic-cart" viewBox="0 0 16 16"><!-- 购物车路径数据 --></symbol>
  <symbol id="ic-heart" viewBox="0 0 16 16"><!-- 收藏路径数据 --></symbol>
</svg>

<!-- 第二步：页面任意位置用 use 引用，零额外网络请求 -->
<svg class="bi text-primary" width="16" height="16" aria-hidden="true">
  <use href="#ic-cart"></use>
</svg>

<!-- 第三步：尺寸由 width 与 height 定，颜色走 currentColor——
     text-danger 一上，图标与文字同步变红，与字体方案完全同源 -->
​

三步里最值得立规矩的是登记环节：symbol 的 id 命名固定「ic-图形名」，新增图标只准追加不准改名，删除先确认全站无引用。图标一多，登记文件就是一份「图标资产台账」，命名混乱的台账比没有台账更难维护。

从字体方案迁到精灵也照这三步走：类名标记换成 use 引用，颜色尺寸判决原样保留——这也是裁决表把两案迁移成本评为低的原因。

两问两答：图标库的高频争议

**问一：项目已经有另一套图标体系，还要引 bootstrap-icons 吗？**判「不引」。两套图标体系的图标风格（线宽、圆角、视口）对不齐，混排的界面比单用哪套都难看。除非现有体系缺关键图形，补齐缺口后就停手。图标库不是越多越好，是越统一越好。

**问二：图标要不要跟主题一起换成「品牌定制图标」？**按 5.4 的判级走：多数情况这是四级改造（设计体系级投入），只有品牌升级立项时才值得。临时需求里，「换几个图标」用现有体系内最接近的图形顶上，把定制预算留给真正影响识别度的主图标。

结案要点

• 图标三用法按请求数与图标数量裁决：字体通用、内联零请求、精灵平衡；
• 图标与文字同源渲染（currentColor），颜色字号工具类直接生效；
• 无障碍铁则：装饰图标 aria-hidden，语义图标配文字或 aria-label；
• 模板按维护活跃度、定制度天花板、依赖清单三判选型，用法是抄判例而非搬遗产。

最后一节把本章手段收拢成四级裁决阶梯。