Bootstrap Icons bar-chart-fill 图标全解析：SVG 源码、字体图标接入与网页实战-开发者社区

前端

【免费下载链接】icons

Official open source SVG icon library for Bootstrap.

项目地址：https://gitcode.com/gh_mirrors/ic/icons

本篇文章围绕 Bootstrap Icons 开源图标库中的bar-chart-fill（实心柱状图）图标展开，结合仓库内 icons/bar-chart-fill.svg 的原始 SVG 路径、font/ 目录下的字体资源以及 docs/layouts/icons/single.html 的图标页渲染模板，讲解该图标的图形结构、Unicode 码位（U+F17A）、字体类名接入、SVG 内联/精灵图/图片引用等全部用法。读完本文，你可以直接在 Bootstrap 生态或任意 HTML 项目中落地使用该图标，并理解其底层实现原理。

图标概览：一个用于数据可视化的实心柱状图

bar-chart-fill是 Bootstrap Icons 官方图标库中"数据（Data）"分类下的成员。仓库为每个图标维护一份独立的 Markdown 文档页，docs/content/icons/bar-chart-fill.md 记录了它的元数据：

--- title: Bar chart fill categories: - Data tags: - chart - graph - analytics ---

其中title是图标展示名，categories: Data表明其归属"数据"分类，tags则给出chart（图表）、graph（图形）、analytics（分析）三个检索标签。在 docs/layouts/icons/single.html 中可以看到，这些元数据会被 Hugo 模板渲染到每个图标详情页的标题区（Tags:与Category:列表），供文档站检索与浏览。

SVG 源码解析：三根递增高度的圆角实心柱

图标本体位于 icons/bar-chart-fill.svg，完整源码如下：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart-fill" viewBox="0 0 16 16"> <path d="M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z"/> </svg>

画布规格：viewBox="0 0 16 16"，即 16×16 网格设计，与整个库的规范一致（README 中说明新字形先在 Figma 中按 16×16 网格设计，再导出为扁平化的fill路径）；
颜色继承：fill="currentColor"意味着图标颜色跟随所在元素的colorCSS 属性，天然适配浅色/深色主题；
类名约定：class="bi bi-bar-chart-fill"是字体图标方案中的选择器命名规范，也是全文搜索时的语义标识。

逐段解析路径数据（均为相对坐标指令），可以得到三根垂直柱子的精确几何关系：

柱子	起始点	横向范围 (x)	纵向范围 (y)	高度（单位）
左柱	(1,11)	1～5	11～15	4
中柱	(6,7)	6～10	7～15	8
右柱	(11,2)	11～15	2～15	13

每根柱子都用a1 1 0 0 1的圆弧命令构造圆角端头，柱子之间留 1 单位间隙（如左柱 x 1～5、中柱 x 6～10、右柱 x 11～15），底部对齐，从"短 → 中 → 长"递进，直观表达"数据增长"的语义。

与同族的描边版 icons/bar-chart.svg 对比可以更清晰地理解两种风格：描边版柱宽仅 2 单位（x 2～4、x 7～9、x 10～12），柱子顶部高度与实心版一致（左柱顶 y=11、中柱顶 y=7、右柱顶 y=2），但实心版通过填充整个矩形区域获得更醒目的视觉重量，更适合作为强调性图标或小尺寸展示。

字体图标接入：一个`<i>`标签搞定

仓库的 font/ 目录为每个图标生成了一整套字体资源，bar-chart-fill对应码位U+F17A（十进制 61818），在各类资源文件中均有对应记录：

font/bootstrap-icons.css：.bi-bar-chart-fill::before { content: "\f17a"; }
font/bootstrap-icons.scss："bar-chart-fill": "\f17a",
font/bootstrap-icons.json："bar-chart-fill": 61818,（码位十进制映射）
font/bootstrap-icons.ts：| "bar-chart-fill"（TypeScript 联合类型，便于类型化枚举图标名）

使用方式（即 docs/layouts/icons/single.html 中 "Icon font" 区块给出的标准写法）：

<i class="bi bi-bar-chart-fill"></i>

前提是引入字体样式表与字体文件。通过 npm 安装后引入：

npm i bootstrap-icons

<link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css">

CSS 中通过@font-face加载 font/fonts/ 下的bootstrap-icons.woff2/bootstrap-icons.woff，并以::before伪元素写入码位字符\f17a（详见 font/bootstrap-icons.css 顶部的@font-face与.bi::before规则）。由于类名基于currentColor继承文字颜色，直接给<i>加style="color: ..."或 Bootstrap 文本色工具类即可换色。

当需要在 JS 中引用时，码位可写为\uF17A；在 HTML 实体中写为。这些写法正是 docs/layouts/icons/single.html 中 "Code point" 区块动态展示的四行（Unicode / CSS / JS / HTML）——该区块会从 font/bootstrap-icons.json 读取十进制码位并转换为十六进制输出，保证文档与字体文件严格一致。

更多接入方式：内联 SVG、img 与精灵图

根据 README.md 的 Usage 说明，Bootstrap Icons 支持四种接入方式，bar-chart-fill全部适用：

1. 内联 SVG（Copy HTML）：直接把 icons/bar-chart-fill.svg 的<svg>片段粘贴进 HTML。这也是 docs/layouts/icons/single.html 中 "Copy HTML" 区块提供的方案——模板读取图标文件并原样输出，方便开发者直接复制。

2.<img>引用：

<img src="icons/bar-chart-fill.svg" alt="Bar chart fill" width="16" height="16">

3. CSS 背景图：将 SVG 用作background-image，配合mask或fill属性实现主题色跟随。

4. SVG 精灵图（sprite）：仓库根目录的 bootstrap-icons.svg 聚合了全部图标（npm run icons通过svg-sprite --config svg-sprite.json生成），可一次性引入后用<use>引用：

<svg class="bi" width="16" height="16" fill="currentColor"> <use xlink:href="bootstrap-icons.svg#bar-chart-fill"/> </svg>

精灵图方案适合页面中大量使用图标、需要复用同一份 SVG 实例以减少请求的场景。

实战场景：结合数据/分析语义使用

bar-chart-fill的chart / graph / analytics标签决定了它的典型应用场景——统计面板、仪表盘、报表入口等。参考 docs/layouts/icons/single.html 中 "Examples" 区块的演示，它可以在多种组件形态中自然嵌入：

行内文本：在"月度营收趋势"、"转化率分析"等文案旁跟随小尺寸图标；
按钮：作为"查看报表"按钮的前缀图标（btn btn-primary等）；
输入组（input-group）：放在输入框前缀作为搜索/筛选提示；
标题旁：配合标题形成视觉锚点。

由于是实心（fill）变体，它在小尺寸（如 12～16px 行内场景）下比描边版轮廓更清晰，适合用作功能入口的强调标识。

工程细节：图标文档页是如何生成的

bar-chart-fill.md这类每图标一页的 Markdown 文件由构建脚本自动生成：package.json 中的pages脚本执行node build/build-pages.mjs，为每个 SVG 生成模板页；渲染时由 docs/layouts/icons/single.html 完成三块核心内容：

大图预览与 Examples：模板内直接readFile读取/icons/{名称}.svg并原样注入；
Download SVG：提供指向 icons/bar-chart-fill.svg 的下载按钮；
Icon font 与 Code point：分别输出<i class="bi bi-bar-chart-fill"></i>和从 font/bootstrap-icons.json 动态换算的码位信息。

这说明文档、SVG 与字体资源由同一套流水线（npm run icons处理 SVG 与字体、npm run pages生成页面）维护，码位、类名与文件三者始终同步——这也是在使用时可以直接信任 font/bootstrap-icons.css 中.bi-bar-chart-fill::before { content: "\f17a"; }这条规则的原因。

小结

bar-chart-fill是一个设计在 16×16 网格上、由三根递增高度的圆角实心柱构成的"数据/分析"语义图标。开发者既可以直接内联其 SVG 源文件（支持currentColor换色），也可以通过字体类bi bi-bar-chart-fill（码位 U+F17A）一行接入，还可用精灵图<use>方式统一管理。若需进一步查阅其余图表类图标的元数据与用法，可直接浏览 docs/content/icons/ 下的同名文档页及 font/bootstrap-icons.ts 的图标名类型定义。