企业官网建设流程全解析

• 前端

Bootstrap Icons 官方开源 SVG 图标库（仓库根目录：README.md）为开发者提供了覆盖建筑、办公与企业管理场景的 Building 图标族。本文以文档页 building.md 为核心骨架，结合仓库源码，系统讲解这一图标族的版本来源、语义分类、设计结构、系列变体、字体内码及多种集成用法，帮助你准确选用图标并在项目中落地。

图标文档的元数据：定位与语义

该图标的文档页采用 Hugo 前端元数据（Front Matter）定义其属性（见 building.md）：

title: Building categories: - Buildings tags: - company - enterprise - organization - office - business added: 1.10.0

• title：图标名称，对应源文件 building.svg 与字体类名bi bi-building；
• categories：归属类别 Buildings（建筑类）；
• tags：company（公司）、enterprise（企业）、organization（组织）、office（办公室）、business（商务），用于检索与归类；
• added：1.10.0，说明该图标自 1.10.0 版本起加入。

同类图标还有 building-fill.md，元数据完全一致，仅标题为 "Building fill"。

SVG 源码结构：楼宇轮廓的绘制方式

核心图标定义在 icons/building.svg（16×16 网格）：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-building" viewBox="0 0 16 16"> <path d="M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"/> <path d="M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm11 0H3v14h3v-2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V15h3z"/> </svg>

绘制要点：

• 外层<path>逐格绘制 3×3 窗户网格（每格 .5 单位的实心方块），底部第三行镂空形成楼体轮廓感；
• 内层<path>勾勒楼宇整体外框，右上角楼体区域向下留出缺口，与building-fill形成虚实对比；
• fill="currentColor"使颜色跟随 CSScolor属性，配合font-size可随文字缩放；
• class="bi bi-building"与字体方案共用命名。

实心变体见 building-fill.svg，其路径更简洁，窗户行与楼体轮廓合并为一个 path，视觉更满。

建筑状态变体家族

Bootstrap Icons 通过后缀区分建筑的状态语义。下表基于icons/目录源码整理，均以 16×16 网格、currentColor着色：

例如 building-add.svg 中，加号由独立 path 绘制：

<path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0"/>

选择建议：轮廓版用于导航、工具栏等轻量场景；实心（fill）版用于强调主状态、列表选中态或高对比小尺寸场景；带状态后缀的变体用于管理后台的机构/楼宇状态展示。

字体字体内码（Code point）

Bootstrap Icons 提供 web font，各图标对应 Unicode 私有区码点，定义在 font/bootstrap-icons.json，示例：

• building：U+F1DD（十进制 61917）
• building-fill：U+F876（十进制 63606）
• building-add：U+F867、building-check：U+F868、building-dash：U+F869、building-down：U+F86A、building-exclamation：U+F86B、building-fill-add：U+F86C……building-x：U+F87B、buildings-fill：U+F87C、buildings：U+F87D

文档站 single.html 会动态读取该 JSON，展示 Unicode/CSS/JS/HTML 四种写法：

• Unicode：U+F1DD
• CSS：\F1DD
• JS：\uF1DD
• HTML：

在项目中集成使用

方式一：SVG 内联

直接粘贴 SVG 到 HTML：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-building" viewBox="0 0 16 16"> <path d="..."/> </svg>

优点：可控、无字体依赖；修改fill、width、height即可变色变尺寸。文档站提供了下载与"Copy HTML"入口（见 single.html）。

方式二：Web Font 字体类

引入字体文件并添加bi类：

<link rel="stylesheet" href="/path/to/bootstrap-icons.css"> <i class="bi bi-building"></i> <i class="bi bi-building-fill"></i>

字体文件位于 font/bootstrap-icons.woff2 与 font/bootstrap-icons.woff。原理：bi bi-building通过 CSS 的::before内容注入对应码点，颜色继承currentColor。CSS 源见 font/bootstrap-icons.css（压缩版 font/bootstrap-icons.min.css，SCSS 源 font/bootstrap-icons.scss）。

方式三：CSS / SCSS / TS 变量

仓库同时提供：

• SCSS：font/bootstrap-icons.scss中可用$bootstrap-icons-map等映射查询；
• TypeScript：font/bootstrap-icons.ts提供图标名称常量，适合在 Vite/TS 项目中按名引用。

方式四：Sprite 雪碧图

仓库根目录 svg-sprite.json 与 bootstrap-icons.svg 提供 Sprite 定义，可用<use>引用：

<svg><use href="/path/to/bootstrap-icons.svg#bi-building"/></svg>

注意：上述文件是否包含全部图标请以仓库实际生成结果为准。

在文档站中的展示与下载流程

图标文档页由 docs/layouts/icons/single.html 渲染，流程（single.html）：

1. 按文档文件名拼出/icons/{name}.svg路径；
2. readFile读取源 SVG 并safeHTML注入；
3. 展示大预览、Examples（标题、按钮、链接、输入组等上下文示例）；
4. 右侧提供 Download SVG、Icon font（<i class="bi bi-building"></i>）、Code point、Copy HTML 区块。

这解释了文档站每个图标页"即看即用"的实现机制，也说明所有图标均为同一套 16×16、currentColor的 SVG 体系。

结语

Building 图标族以 Buildings 类别（company/enterprise/organization/office/business 标签）承载企业、办公、楼宇管理场景语义，自 Bootstrap Icons 1.10.0 版本起提供。无论选择内联 SVG、Web Font、SCSS/TS 变量还是 Sprite 引用，均可通过 font/bootstrap-icons.json 获取码点、通过 icons/building.svg 获取矢量源，快速接入前端项目。

• 前端