前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载导读building-fill-x 是 Bootstrap Icons 官方图标库中一个语义鲜明的实心建筑物图标——它在经典「实心建筑」轮廓的基础上于右上角叠加了一个 X 关闭标记常用于「删除企业/组织」「移除办公地点」「不可用建筑」等负面操作场景。本文将以该图标的文档条目docs/content/icons/building-fill-x.md为骨架结合仓库中的 SVG 源文件、字体产物与构建配置完整讲解它的元数据定义、路径结构、字体编码机制以及三种主流接入方式帮助你直接在本项目仓库中定位、理解并复用这一图标。一、图标文档条目Front Matter 里的元数据在 Bootstrap Icons 仓库中每个图标都对应一个位于 docs/content/icons 目录下的 Markdown 文档。building-fill-x的文档条目docs/content/icons/building-fill-x.md本身采用 Hugo Front Matter 结构内容虽然精简却完整定义了图标的展示与归类信息--- title: Building fill x categories: - Buildings tags: - company - enterprise - organization - office - business added: 1.10.0 ---逐项解读这四个字段title图标的展示名称即「实心建筑 X」的英文语义Building fill xcategories图标所属的分类这里归入Buildings建筑大类与仓库中building.svg、building-fill.svg、building-x.svg等同族图标保持一致tags用于站点检索与筛选的关键词本图标覆盖company公司、enterprise企业、organization组织、office办公室、business商务五个业务语义说明它面向企业与办公场景设计added图标加入图库的版本号为1.10.0即该图标从 Bootstrap Icons v1.10.0 起可用使用前需注意版本下限。该 Front Matter 会被 docs 站点的布局模板渲染为图标详情页同时参与图标库的「Buildings」分类浏览页。因此在实际业务中引用该图标前应先确认依赖版本不低于1.10.0。二、SVG 源文件两个 Path 的图形语义与结构解析图标的真实几何数据位于 icons/building-fill-x.svg这是整个仓库icons/目录每图标一个独立 SVG中的标准产物。完整源码如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-building-fill-x viewBox0 0 16 16 path dM2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7.256A4.5 4.5 0 0 0 12.5 8a4.5 4.5 0 0 0-3.59 1.787A.5.5 0 0 0 9 9.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .39-.187A4.5 4.5 0 0 0 8.027 12H6.5a.5.5 0 0 0-.5.5V16H3a1 1 0 0 1-1-1zm2 1.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5m3 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5m3.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.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5M7.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.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5M4.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-.5z/ path dM12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m-.646-4.854.646.647.646-.647a.5.5 0 0 1 .708.708l-.647.646.647.646a.5.5 0 0 1-.708.708l-.646-.647-.646.647a.5.5 0 0 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 .708-.708/ /svg从 SVG 规范与路径数据可以拆解出三层信息画布规格viewBox0 0 16 16即 16×16 的网格坐标系统这是 Bootstrap Icons 全系列的统一设计基线width与height均设为 16内联使用时默认以 16px 渲染着色机制fillcurrentColor是 Bootstrap Icons 的核心约定——图标本身不带固定颜色颜色随外部 CSS 的color属性流动因此同一图标可通过一行color样式适配不同主题类名约定classbi bi-building-fill-x其中bi是全局图标基类bi-building-fill-x是对应的图标专属类与字体产物中的 CSS 规则一一对应。再看两条 Path 的图形语义可从路径数据推断第一条 Path建筑主体从左上角M2 1起笔绘制一栋 12×8 的实心建筑框架内部通过m2 1.5v1...等子路径刻画了三行两列共六个窗户网格分别位于 y≈1.5、y≈5、y≈8 三档高度并在右下角为后续的 X 标记预留了右上角区域建筑底部V16直达画布底边形成贴地的实心底座第二条 PathX 标记以M12.5 16a3.5 3.5 0 1 0 0-7在建筑右上角绘制一个直径约 3.5 单位的圆形区域内部再以四段M...l折线绘制两条交叉斜线构成标准的「关闭 / 移除」X 符号。两个 Path 叠加的结果就是「实心建筑 右上角 X」的组合图标图形语义可归纳为对某个建筑实体企业、组织、办公地点执行移除、关闭或停用操作。三、字体集成Unicode 私有区编码与四份产物文件与所有 Bootstrap Icons 图标一样building-fill-x 不只以 SVG 形式存在还被打包进字体文件供 CSS 类方式引用。仓库 font 目录下的四份产物共同完成了这一映射产物文件具体内容含义font/bootstrap-icons.jsonbuilding-fill-x: 63605十进制码点 63605即十六进制UF875font/bootstrap-icons.scssbuilding-fill-x: \f875SCSS 变量映射第 1901 行font/bootstrap-icons.css.bi-building-fill-x::before { content: \f875; }CSS 伪元素规则第 1894 行font/bootstrap-icons.min.css同规则压缩版生产环境最小化产物关键知识点如下字体编码所有图标均落在 Unicode 私有使用区PUAUF000–UF8FF内UF875即 building-fill-x 在该字体中的专属码位。这避免了与任何 Unicode 标准字符冲突是图标字体的通用做法字形来源上述content: \f875对应的实际字形存放在 font/fonts 目录下的bootstrap-icons.woff2与bootstrap-icons.woff两种字面格式中。CSS 文件开头的font-face规则font/bootstrap-icons.css 第 7–12 行声明了font-family: bootstrap-icons并依次回退加载 woff2现代浏览器优先与 woff类名机制CSS 文件第 14–25 行的规则.bi::before, [class^bi-]::before, [class* bi-]::before统一为所有以bi/bi-开头的元素注入字体字形因此只需在元素上添加bi bi-building-fill-x两个类名浏览器就会自动将::before伪元素的内容替换为UF875字形。此外font/bootstrap-icons.ts 中导出的BootstrapIconsId联合类型同样包含building-fill-x供 TypeScript 项目做图标名的静态类型约束而根目录的 bootstrap-icons.svg 则是所有图标拼合生成的 SVG Sprite 源文件building-fill-x 的symbol片段亦在其中。四、实际使用SVG 内联、字体类名与 npm 安装围绕上述产物共有三条主流接入路径全部可在当前仓库内验证与演练4.1 内联 SVG推荐可独立使用单文件直接从 icons/building-fill-x.svg 复制 SVG 片段到页面中再通过 CSS 控制尺寸与颜色svg classbi bi-building-fill-x width24 height24 fillcurrentColor viewBox0 0 16 16 aria-label移除企业 path dM2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7.256A4.5 4.5 0 0 0 12.5 8a4.5 4.5 0 0 0-3.59 1.787A.5.5 0 0 0 9 9.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .39-.187A4.5 4.5 0 0 0 8.027 12H6.5a.5.5 0 0 0-.5.5V16H3a1 1 0 0 1-1-1zm2 1.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5m3 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5m3.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.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5M7.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.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5M4.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-.5z/ path dM12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m-.646-4.854.646.647.646-.647a.5.5 0 0 1 .708.708l-.647.646.647.646a.5.5 0 0 1-.708.708l-.646-.647-.646.647a.5.5 0 0 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 .708-.708/ /svg内联方案的优势是单文件自包含、零依赖、无字体加载适合 SSR、邮件模板或需要精确控制路径的场景。4.2 字体类名适合高频批量使用引入 font/bootstrap-icons.css或 min 版本后直接书写类名i classbi bi-building-fill-x/i浏览器通过::before { content: \f875 }从字体中渲染字形。注意此方案依赖bootstrap-icons.woff2/.woff字体文件随 CSS 一同部署且字体映射的码位UF875随图标库版本可能变化升级版本时建议同步更新 CSS 产物。使用时可配合font-size、color控制尺寸与主题色.bi-building-fill-x { font-size: 1.5rem; /* 放大字形 */ color: #dc3545; /* 例如用红色表达「移除」语义 */ }4.3 npm / Composer 安装面向项目工程化按仓库 README.md 的说明Bootstrap Icons 已发布到 npm 与 Packagist安装后仅包含处理好的 SVG具体接入方式由使用方自行实现npm i bootstrap-icons # 或通过 Composer 安装Packagist 上的 twbs/bootstrap-icons composer require twbs/bootstrap-icons安装后即可从包内按需引用icons/building-fill-x.svg或font/bootstrap-icons.css等产物。五、同族图标矩阵与 building 系列的选择building-fill-x属于仓库中庞大且成体系的「建筑」图标族同目录下icons可找到多个语义相近的变体便于按需求精确选型building.svg基础「建筑」线性轮廓中性语义building-fill.svg实心填充版视觉更重、更强调实体感building-x.svg线性建筑 X 标记非实心building-fill-x.svg本文主角实心建筑 X 标记是「删除 / 停用建筑」语义中视觉最突出的一个同一族还扩展出building-add、building-check、building-dash、building-lock、building-up、building-slash等状态型变体可组合表达增删改查等管理操作。选型建议需要传达明确「移除 / 关闭」动作且界面中存在大量浅色背景时优先building-fill-x实心主体辨识度高若追求与线性图标风格统一则选building-x.svg。两者的 X 标记几何一致仅建筑主体填充不同。六、快速自查清单在项目中落地building-fill-x时可对照以下清单逐项确认版本图标自1.10.0引入确认所依赖的 Bootstrap Icons 版本满足下限产物路径SVG 源文件在 icons/building-fill-x.svg字体与 CSS 产物在 font 目录SVG Sprite 汇总在 bootstrap-icons.svg编码一致性CSS/SCSS 中building-fill-x的码位为\f875JSON 中十进制63605如需自定义字体构建务必保持码位一致无障碍内联 SVG 时补充aria-label或roleimg说明「移除/关闭建筑」的动作语义而非让读屏软件朗读无意义的路径数据配色依赖currentColor机制通过外层 CSS 的color控制图标颜色不要在 SVG 内硬编码fill。至此从文档元数据到 SVG 路径、从字体码位到三种接入方式building-fill-x在 Bootstrap Icons 仓库中的完整技术链路已全部打通。后续若需批量检索其他图标可沿 docs/content/icons 的同类文档条目与 icons 目录继续深入。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐深入解析 Bootstrap Icons 的 building-dash 图标SVG 结构、字体映射与使用指南深入解析 Bootstrap Icons 的 building dash 图标SVG 结构、字体映射与使用指南 导读本文以 Bootstrap Icons前端Bootstrap Icons 图标解读caret-down-fill 的 SVG 结构、字体映射与四种使用方式Bootstrap Icons 图标解读caret down fill 的 SVG 结构、字体映射与四种使用方式 caret down fill 是 Boot前端Bootstrap Icons 的 camera-video-fill 图标源码结构、字体映射与使用指南Bootstrap Icons 的 camera video fill 图标源码结构、字体映射与使用指南 本篇技术指南以 Bootstrap Icons 官方前端上一篇PotPlayer字幕翻译插件技术方案基于百度翻译API的实时字幕转换实现方法下一篇如何快速掌握AlwaysOnTop窗口置顶工具面向新手的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考