前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载导读building-fill-add是 Bootstrap Icons 官方开源图标库中用于表达新增楼宇/添加建筑设施语义的实心填充图标适用于企业后台、办公管理、物业系统等场景中的添加建筑新增楼栋操作按钮与功能入口。本文以仓库中该图标的元数据文档 docs/content/icons/building-fill-add.md 为主体结合其 SVG 源码与字体资源文件讲解该图标的图形结构、HTML/CSS 字体用法、Unicode 码位引用方式及设计规格帮助你直接复制即可落地使用。图标元数据从 Front Matter 认识这个图标在 Bootstrap Icons 文档仓库中每个图标都由一个 Markdown 文档定义其元数据。building-fill-add的文档位于 docs/content/icons/building-fill-add.md其完整 Front Matter 内容如下--- title: Building fill add categories: - Buildings tags: - company - enterprise - organization - office - business added: 1.10.0 ---这份元数据明确了几个关键事实标题titleBuilding fill add即建筑填充·新增fill表示该图标为实心填充风格分类categoriesBuildings属于建筑类图标与building、building-fill、buildings-fill、bank等同属一组标签tagscompany公司、enterprise企业、organization组织、office办公室、business商务这些标签被文档站用于搜索与索引意味着该图标适用于企业/办公类业务界面添加版本added1.10.0即该图标自 Bootstrap Icons v1.10.0 起进入官方图标集。当前仓库 package.json 中的版本为1.13.1说明它已在多个后续版本中持续提供。图形结构从 SVG 源码解读建筑 加号该图标的原始 SVG 文件为 icons/building-fill-add.svg采用 Bootstrap Icons 标准的 16×16 网格设计svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-building-fill-add viewBox0 0 16 16 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/ 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/ /svg从路径数据可以拆解出两个组成层次第一个path是右上角的加号路径以M12.5 16a3.5 3.5 0 1 0 0-7开头描述了一个圆心位于 (12.5, 12.5)、半径 3.5 的圆形取反区域随后用四段直线m.5-5v1h1...绘制出标准的加号——横竖各一短条位于建筑主体的右上角第二个path是主体建筑从M2 1a1 1 0 0 1 1-1h10...开始绘制了一座带正门、三行等分窗格的矩形建筑。从坐标布局可以推断建筑共有三行窗体y 方向 2、4、6 附近的窗格且顶部一行的最右侧窗格被刻意留空为右上角的加号腾出位置从而形成在既有建筑上新增的视觉语义。这种基础图形 状态叠加图形的组合方式与building-fill-check、building-fill-lock、building-fill-slash、building-fill-x、building-fill-gear等同一批次图标的结构一致它们共享同一座建筑的轮廓仅在右上角叠加不同的操作状态图形。使用同类图标可以让 UI 保持高度一致的视觉语言。五种集成方式让图标真正进入你的项目根据仓库 README.md 的 Usage 说明Bootstrap Icons 支持多种集成方式building-fill-add同样适用。下面逐一给出可直接使用的示例。1. 内联 SVG推荐用于需要着色/缩放的场景将 icons/building-fill-add.svg 的内容直接粘贴进 HTML。该图标使用fillcurrentColor因此颜色完全跟随父元素的color样式无需额外设置svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-building-fill-add viewBox0 0 16 16 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/ 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/ /svg2.img标签引用SVG 源文件可以直接作为图片资源加载img src/icons/building-fill-add.svg alt添加建筑 width16 height163. CSS 图标字体最常见的方式安装 npm 包后引入字体样式表即可用类名渲染图标。包名与安装方式见 README.mdnpm i bootstrap-icons然后引入 font/bootstrap-icons.css或压缩版 font/bootstrap-icons.min.csslink relstylesheet hrefnode_modules/bootstrap-icons/font/bootstrap-icons.css在 HTML 中使用i classbi bi-building-fill-add/i对应的样式定义可在 font/bootstrap-icons.scss 中找到其核心是通过::before伪元素写入字体码位.bi-building-fill-add::before { content: \f86c; }其中\f86c是字符码位的十六进制转义写法。SCSS 版本还允许你用import引入变量系统后按需编译适合 Sass 项目。4. SVG Sprite 方式仓库根目录的 bootstrap-icons.svg 是合并后的雪碧图文件由npm run icons-sprite基于 svg-sprite.json 生成。使用use引用对应符号即可svg classbi width16 height16 fillcurrentColor aria-hiddentrue use xlink:hrefbootstrap-icons.svg#building-fill-add/ /svg5. TypeScript 项目中的类型提示对于使用 TypeScript 的项目font/bootstrap-icons.ts 为每个图标提供了类型化的类名声明building-fill-add也在其中IDE 可以据此对图标类名做补全与校验。Unicode 码位用字符直接嵌入文本building-fill-add在字体中的 Unicode 码位记录在 font/bootstrap-icons.json 中building-fill-add: 6359663596 为十进制换算成十六进制为F86C即 SCSS 中的\f86c。以这个码位为基础可以在不同上下文中直接引用Unicode 表示UF86C私人使用区码位仅配合 Bootstrap Icons 字体生效CSS 转义\f86c用于content属性SCSS/CSS 已内置JavaScript 字符串\uF86C可用于动态拼接图标文本HTML 实体#xF86C;可在::before或直接文本中使用。这些码位的展示与换算逻辑由文档站模板 docs/layouts/icons/single.html 实现它读取font/bootstrap-icons.json将十进制码位换算为十六进制后渲染出上述四种格式。设计规格与命名规范结合 README.md 中 Adding SVGs 一节与 svgo.config.mjs、eslint.config.mjs 等构建配置可以确认该图标的规格约束网格与尺寸图标基于 16×16 px 网格设计viewBox0 0 16 16这是 Bootstrap Icons 的统一设计基准填充方式使用fill实心填充而非stroke描边确保小尺寸下依然清晰属性规范源码经过 SVGO 优化并统一属性顺序xmlns→width→height→fill→class→viewBox因此所有图标源码结构一致命名规则building-fill-add遵循 基础名 -fill填充风格 -add操作语义 的命名模式与其同系列的building-fill-check、building-fill-x、building-fill-lock等保持一致的分类与搜索行为均属于 Buildings 分类。在文档站中预览与下载本仓库使用 Hugo 构建文档站图标详情页模板为 docs/layouts/icons/single.html。每个图标的文档页会动态渲染大尺寸实时预览与多种尺寸的示例标题、行内文本、链接、按钮、输入组等场景Download SVG提供 icons/building-fill-add.svg 的直接下载入口Icon font代码片段i classbi bi-building-fill-add/i即 CSS 字体用法的复制即用代码Code point展示上文提到的四种码位格式Copy HTML将内联 SVG 全文高亮展示方便一键复制进项目。本地启动文档站的方式为参见 package.json 中的 scriptsnpm i npm start随后访问http://localhost:4000即可浏览全部图标详情页building-fill-add的页面会由 Hugo 根据 docs/content/icons/building-fill-add.md 的 Front Matter 自动生成。总结building-fill-add是 Bootstrap Icons 中表达新增建筑/添加楼宇语义的标准实心填充图标自 v1.10.0 起随官方发布归类于 Buildings 分类并带有企业、办公类标签。无论你选择内联 SVG、CSS 字体、雪碧图还是直接引用 Unicode 码位\f86c都可以在项目中快速集成其建筑主体 右上角加号的图形结构与building-fill-check、building-fill-x等同系列图标共同构成了完整的建筑操作状态集合适合在企业后台、办公管理和物业系统中保持一致的视觉语言。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons Bookmark Star Fill收藏星标图标的源码解析与使用指南Bootstrap Icons Bookmark Star Fill收藏星标图标的源码解析与使用指南 Bootstrap Icons 是 Bootstrap前端Bootstrap Icons 的 basket-fill 购物篮图标SVG、图标字体与代码点使用全指南Bootstrap Icons 的 basket fill 购物篮图标SVG、图标字体与代码点使用全指南 本文以 Bootstrap Icons 官方开源图标前端Bootstrap Icons 图标详解arrow-right-square-fill 实心方形右箭头Bootstrap Icons 图标详解arrow right square fill 实心方形右箭头 arrow right square fill 是 B前端上一篇告别日志混乱LightRAG分级日志与文件配置完全指南下一篇从0到1理解E5嵌入技术弱监督对比预训练如何革新文本检索创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考