Bootstrap Icons 的 0-square-fill 图标：SVG 源码、字体注册与页面级使用详解

前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载0-square-fill是 Bootstrap IconsBootstrap 官方开源 SVG 图标库中 Shapes形状分类下的数字系列图标表示带实心方形容器的数字 0。本文以仓库中的图标文档条目 docs/content/icons/0-square-fill.md 为骨架结合 icons/0-square-fill.svg 的源码、font/ 目录下的字体注册文件以及 bootstrap-icons.svg 的 sprite 定义完整讲解该图标的元数据语义、SVG 路径结构以及在前端项目中四种可落地的引用方式。图标文档条目解析front matter 元数据Bootstrap Icons 的每个图标在 docs/content/icons/ 目录下都对应一个 Hugo Markdown 文档0-square-fill的文档条目 docs/content/icons/0-square-fill.md 内容如下--- title: 0 square fill categories: - Shapes tags: - number - numeral added: 1.10.0 ---这段 Hugo front matter 定义了图标的检索元数据字段值含义title0 square fill图标显示名称由文件名去扩展名、连字符转空格得到categoriesShapes图标所属分类。0-square-fill被归入 Shapes 分类与0-square、0-circle、1-square-fill等容器型图标一致tagsnumber,numeral检索标签便于在文档站内按数字/数字符号语义搜索added1.10.0图标加入库的版本号表示该图标自 Bootstrap Icons 1.10.0 起可用可以对比同分类的数字系列图标文档如 docs/content/icons/1-square-fill.md结构完全相同而较早加入的图标如0-square、0-circle系列会在 front matter 中保留added版本字段供文档站渲染加入版本信息。这类条目同时支撑着图标的 permalink 页面生成README 中的pagesnpm script 即为Generates permalink pages for each icon with template Markdown也就是说每个文档条目都会渲染成一个独立的图标详情页。SVG 源码剖析16×16 网格上的实心方形数字 0图标本体位于 icons/0-square-fill.svg源码只有两个path元素svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-0-square-fill viewBox0 0 16 16 path dM8 4.951c-1.008 0-1.629 1.09-1.629 2.895v.31c0 1.81.627 2.895 1.629 2.895s1.623-1.09 1.623-2.895v-.31c0-1.8-.621-2.895-1.623-2.895/ path dM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm5.988 12.158c-1.851 0-2.941-1.57-2.941-3.99V7.84c0-2.408 1.101-3.996 2.965-3.996 1.857 0 2.935 1.57 2.935 3.996v.328c0 2.408-1.101 3.99-2.959 3.99/ /svg关键点统一画布与填充width/height均为 16viewBox0 0 16 16。所有 Bootstrap Icons 图形都基于 16×16px 网格设计README 明确说明新图形在 Figma 中以 16×16px 网格绘制。fillcurrentColor图标颜色继承 CSS 的color属性这决定了它天然适配 CSS 字体引用方式和 SVG sprite 方式可直接随文本颜色变化。双路径结构第一个path是数字 0 的主体笔画第二个path前半段M2 0 ... -2-2z是 2px 圆角的外方形容器后半段是数字 0 内部镂空的补全路径。这种容器 内容的复合结构让实心fill变体可以在方框中呈现带镂空内圈的数字 0。bi-0-square-fill类名与 CSS 字体方式的类名约定一一对应。与轮廓版 icons/0-square.svg 相比fill 变体去掉了描边式外框路径改为实心方形 镂空数字的构图视觉上更厚重适合强调、按钮、徽标等需要高对比度的场景。四份注册文件图标如何在构建产物中生效Bootstrap Icons 通过构建脚本对应 npm scripticons把 icons/ 目录下的原始 SVG 统一处理为字体与 sprite0-square-fill因此同时出现在以下四份产物中1. SCSS 变量映射font/bootstrap-icons.scss$bootstrap-icons-map中登记了图标名到 PUA私有使用区码点的映射文件第 1849 行附近0-square-fill: \f841,SCSS 源文件头部同时通过font-face声明了字体族bootstrap-icons及fonts/bootstrap-icons.woff2/.woff两个字面文件并定义了.bi::before、[class^bi-]::before、[class* bi-]::before的统一样式display: inline-block、line-height: 1、vertical-align: -.125em等确保字形基线对齐。2. CSS 类规则font/bootstrap-icons.css编译后的 CSS 中对应规则为.bi-0-square-fill::before { content: \f841; }当 HTML 元素带上bi bi-0-square-fill类时::before伪元素写入码点\f841配合.bi类上声明的字体族bootstrap-icons渲染出字形。压缩版 font/bootstrap-icons.min.css 包含相同的规则字体文件带哈希查询串如fonts/bootstrap-icons.woff2?e3485313...用于缓存失效控制。3. JSON 码点清单font/bootstrap-icons.json0-square-fill: 63553,这里63553是\f841的十进制形式十六进制0xF841 63553供程序化消费如按码点查找图标、生成预览网格使用。4. TypeScript 类型font/bootstrap-icons.tsexport type BootstrapIconsId ... | 0-square-fill ...该文件导出一个联合类型BootstrapIconsId把所有图标名收拢为编译期类型。TS/框架类项目可以基于此类型实现图标组件的参数约束避免拼错图标名。此外bootstrap-icons.svg 是 svg-sprite.json配置见 svg-sprite.json生成的 SVG sprite每个图标被包装为symbol如symbol classbi bi-0-square-fill viewBox0 0 16 16 id0-square-fill可直接通过use引用。在项目中使用该图标的四种方式Bootstrap Icons 支持四种引用方式见 README.md 的 Usage 一节0-square-fill均可适用方式一内联 SVG推荐用于单图标页面直接把 icons/0-square-fill.svg 的内容粘贴进 HTML。由于使用了fillcurrentColor父元素设置color即可着色svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-0-square-fill viewBox0 0 16 16 path dM8 4.951c-1.008 0-1.629 1.09-1.629 2.895v.31c0 1.81.627 2.895 1.629 2.895s1.623-1.09 1.623-2.895v-.31c0-1.8-.621-2.895-1.623-2.895/ path dM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm5.988 12.158c-1.851 0-2.941-1.57-2.941-3.99V7.84c0-2.408 1.101-3.996 2.965-3.996 1.857 0 2.935 1.57 2.935 3.996v.328c0 2.408-1.101 3.99-2.959 3.99/ /svg方式二img引用img srcicons/0-square-fill.svg alt0 square fill width32 height32由于img是独立文档currentColor无法继承页面颜色需要配色时请在 SVG 源码中显式修改fill属性值。方式三SVG sprite use先引入根目录的 bootstrap-icons.svg再按#id引用svg classbi width16 height16 fillcurrentColor aria-hiddentrue use xlink:hrefbootstrap-icons.svg#0-square-fill/use /svguse指向id0-square-fill的symbol同样支持currentColor继承。方式四CSS 字体最适合按钮/导航这类高频复用场景安装 npm 包后引入样式并加类npm i bootstrap-iconslink relstylesheet hrefnode_modules/bootstrap-icons/font/bootstrap-icons.css i classbi bi-0-square-fill/i.bi-0-square-fill的::before会写入\f841见 font/bootstrap-icons.css。此时图标尺寸跟随font-size颜色跟随color需要放大时直接调整font-size即可这是字体方式相对 SVG 内联的主要便利之处。若项目使用 SCSS也可直接引入 font/bootstrap-icons.scss 使用变量映射。与数字系列图标的关联与选型建议0-square-fill并非孤立存在仓库中数字系列围绕容器与填充形成了完整矩阵0-circle、0-circle-fill、0-square、0-square-fill以及19的 circle/square × fill/outline 组合见 icons/ 目录。从码点连续性也可印证这一点0-circle-fill为\f83f、0-circle为\f840、0-square-fill为\f841、0-square为\f842见 font/bootstrap-icons.css。选型建议需要突出数字本身、底色对比强烈的场景徽标、角标、统计卡片选fill 实心变体0-square-fill需要更轻量、低视觉干扰的场景选轮廓版0-square圆形构图与方形构图的取舍看宿主容器形状圆形适合头像、状态点方形适合表格、卡片格。结语0-square-fill的完整生命周期贯穿了 Bootstrap Icons 仓库的四个层面docs/content/icons/下的文档条目负责检索元数据icons/下的 SVG 源码是图形本体font/下的四份注册文件SCSS 映射、CSS 类、JSON 码点、TS 类型使其进入字体/类型体系bootstrap-icons.svgsprite 则提供了use引用入口。理解这条链路后你既能正确引用该图标也能举一反三地掌握整个 Bootstrap Icons 库含 0–9 全系列的引用与定制方法。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐如何把 Spring Boot 项目一键部署到远程 Docker 容器如何把 Spring Boot 项目一键部署到远程 Docker 容器 如果你写好了一个 Spring Boot Web 项目想把它推到远程服务器上的 Do前端3分钟跑通Edge TTS免密钥语音合成MP33分钟跑通Edge TTS免密钥语音合成MP3 给 App 加语音播报时我想用微软的神经语音质量又不想被操作系统绑住。edge tts 让你用 Pytho前端Bootstrap Icons 的 Alphabet 图标abc 字形完整使用指南从 SVG 源码到字体码点Bootstrap Icons 的 Alphabet 图标abc 字形完整使用指南从 SVG 源码到字体码点 导读 本文围绕 Bootstrap Icon前端上一篇NVIDIA Profile Inspector终极指南免费解锁显卡隐藏性能的完整教程下一篇如何彻底掌控华硕笔记本性能G-Helper轻量级控制工具完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考