Bootstrap Icons Building 图标详解：建筑/办公语义图标集的使用与源码解读-北京尧图网络

前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载Bootstrap Icons 官方开源 SVG 图标库仓库根目录README.md为开发者提供了覆盖建筑、办公与企业管理场景的 Building 图标族。本文以文档页 building.md 为核心骨架结合仓库源码系统讲解这一图标族的版本来源、语义分类、设计结构、系列变体、字体内码及多种集成用法帮助你准确选用图标并在项目中落地。图标文档的元数据定位与语义该图标的文档页采用 Hugo 前端元数据Front Matter定义其属性见 building.mdtitle: Building categories: - Buildings tags: - company - enterprise - organization - office - business added: 1.10.0title图标名称对应源文件 building.svg 与字体类名bi bi-buildingcategories归属类别 Buildings建筑类tagscompany公司、enterprise企业、organization组织、office办公室、business商务用于检索与归类added1.10.0说明该图标自 1.10.0 版本起加入。同类图标还有 building-fill.md元数据完全一致仅标题为 Building fill。SVG 源码结构楼宇轮廓的绘制方式核心图标定义在 icons/building.svg16×16 网格svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-building viewBox0 0 16 16 path dM4 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 dM2 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形成虚实对比fillcurrentColor使颜色跟随 CSScolor属性配合font-size可随文字缩放classbi bi-building与字体方案共用命名。实心变体见 building-fill.svg其路径更简洁窗户行与楼体轮廓合并为一个 path视觉更满。建筑状态变体家族Bootstrap Icons 通过后缀区分建筑的状态语义。下表基于icons/目录源码整理均以 16×16 网格、currentColor着色图标源文件语义buildingbuilding.svg基础建筑轮廓building-fillbuilding-fill.svg实心填充版building-addbuilding-add.svg建筑新增加号building-checkbuilding-check.svg建筑对勾完成/通过building-dashbuilding-dash.svg建筑减号移除/删除building-downbuilding-down.svg建筑向下箭头下线/降级building-exclamationbuilding-exclamation.svg建筑感叹号警告building-gearbuilding-gear.svg建筑齿轮设置/管理building-lockbuilding-lock.svg建筑锁安全/私有building-slashbuilding-slash.svg建筑斜杠禁用/删除building-upbuilding-up.svg建筑向上箭头上线/升级building-xbuilding-x.svg建筑叉号错误/关闭building-fill-addbuilding-fill-add.svg实心新增building-fill-checkbuilding-fill-check.svg实心对勾building-fill-dashbuilding-fill-dash.svg实心减号building-fill-downbuilding-fill-down.svg实心向下building-fill-exclamationbuilding-fill-exclamation.svg实心感叹号building-fill-gearbuilding-fill-gear.svg实心齿轮building-fill-lockbuilding-fill-lock.svg实心锁building-fill-slashbuilding-fill-slash.svg实心斜杠building-fill-upbuilding-fill-up.svg实心向上building-fill-xbuilding-fill-x.svg实心叉号buildingsbuildings.svg多栋建筑楼群/园区buildings-fillbuildings-fill.svg多栋建筑实心版例如 building-add.svg 中加号由独立 path 绘制path dM12.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 pointBootstrap Icons 提供 web font各图标对应 Unicode 私有区码点定义在 font/bootstrap-icons.json示例buildingUF1DD十进制 61917building-fillUF876十进制 63606building-addUF867、building-checkUF868、building-dashUF869、building-downUF86A、building-exclamationUF86B、building-fill-addUF86C……building-xUF87B、buildings-fillUF87C、buildingsUF87D文档站 single.html 会动态读取该 JSON展示 Unicode/CSS/JS/HTML 四种写法UnicodeUF1DDCSS\F1DDJS\uF1DDHTML#xF1DD;在项目中集成使用方式一SVG 内联直接粘贴 SVG 到 HTMLsvg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-building viewBox0 0 16 16 path d.../ /svg优点可控、无字体依赖修改fill、width、height即可变色变尺寸。文档站提供了下载与Copy HTML入口见 single.html。方式二Web Font 字体类引入字体文件并添加bi类link relstylesheet href/path/to/bootstrap-icons.css i classbi bi-building/i i classbi 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.cssSCSS 源 font/bootstrap-icons.scss。方式三CSS / SCSS / TS 变量仓库同时提供SCSSfont/bootstrap-icons.scss中可用$bootstrap-icons-map等映射查询TypeScriptfont/bootstrap-icons.ts提供图标名称常量适合在 Vite/TS 项目中按名引用。方式四Sprite 雪碧图仓库根目录 svg-sprite.json 与 bootstrap-icons.svg 提供 Sprite 定义可用use引用svguse href/path/to/bootstrap-icons.svg#bi-building//svg注意上述文件是否包含全部图标请以仓库实际生成结果为准。在文档站中的展示与下载流程图标文档页由 docs/layouts/icons/single.html 渲染流程single.html按文档文件名拼出/icons/{name}.svg路径readFile读取源 SVG 并safeHTML注入展示大预览、Examples标题、按钮、链接、输入组等上下文示例右侧提供 Download SVG、Icon fonti classbi 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 获取矢量源快速接入前端项目。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 图标使用指南building-fill-add 企业建筑填充新增图标详解Bootstrap Icons 图标使用指南building fill add 企业建筑填充新增图标详解导读 building fill add 是 Bo前端Bootstrap Icons 详解bi-building-fill-lock 图标的设计、语义与应用Bootstrap Icons 详解bi building fill lock 图标的设计、语义与应用 Bootstrap IconsBootstrap 官前端Bootstrap Icons 图标详解building-upbi-building-up——从 SVG 源码到字体映射与业务场景Bootstrap Icons 图标详解building upbi building up——从 SVG 源码到字体映射与业务场景 building up前端上一篇plibsys动态库加载技术POSIX/Win32/HP-UX多平台支持终极指南下一篇OpenTelemetry Rust上下文传播机制详解实现跨服务链路追踪创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Bootstrap Icons Building 图标详解：建筑/办公语义图标集的使用与源码解读

相关推荐

CNN虚假评论检测：从词向量构建到可解释判别实战

使用 OpenCV 读取、显示和写入图像

解决 CMake 提示“could not find any instance of Visual Studio”

更多资讯

DataGrip 2026.1 查询文件重构实战：用 TaoToken 统一 Key 打通 AI 代理与 PostgreSQL 数据源模板

Claude Code 介绍：用 TaoToken 统一 Key 打通 CLI AI 编程工作流

小小小工具配 TaoToken：settings.json 骨架与连通性验证

瑞萨CS+ for CC开发环境搭建与使用：RL78/RX嵌入式开发入门指南

Keil MDK与C51共存安装指南：STM32与51开发环境配置避坑

【AIGC】Claude Code Agent Teams 模式实战：settings.json 配置与团队定义文件样例

今日更新

开源模型端侧落地实战：量化、推理加速与Agent上下文管理

AI Evals实战指南：从零搭建LLM应用评估体系与CI/CD集成

Java采购管理系统实战：从数据库设计到事务一致性

本周精选

如何彻底离线使用 Laya-CoreML：Hugging Face 下载、缓存机制与 local_files_only 详解

基于1Panel 部署MySQL MCP 服务：TaoToken 统一 Key 接入与 config.toml 配置实战

崇州园区营销网站建设避坑指南：5大注意事项保备案安全

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？