Bootstrap Icons 的 disc-fill 光盘图标：SVG 源码、字体码点与完整使用指南

本文以 Bootstrap Icons 官方开源图标库中 disc-fill（实心光盘）图标为对象，从它的文档元数据、SVG 路径源码出发，完整讲解该图标在 Web 字体、SVG Sprite、内联 SVG 三种形态下的真实用法，并给出它在文档站点中的渲染链路与码点（U+F2FE）依据，帮助开发者快速在页面、组件或媒体类产品中正确使用这一图标。

图标定位：从文档元数据认识 disc-fill

disc-fill 的官方文档页位于 docs/content/icons/disc-fill.md，是一份标准的 Hugo 内容页（front matter 驱动），其元数据如下：

---
title: Disc fill
categories:
  - Media
tags:
  - cd
  - compact disc
  - bluray
  - dvd
---

从中可以提炼出该图标的语义定位：

• 标题：Disc fill，即“实心（填充）光盘”，与同库的 disc（描边版）图标对应；
• 分类（Media）：属于媒体类图标，适合出现在播放器、唱片、专辑、光驱、音视频素材等场景；
• 标签：cd、compact disc、bluray、dvd，表明该图形既可表示 CD、DVD，也可用于蓝光（Blu-ray）等光学媒体概念，语义覆盖广泛。

在 docs/layouts/icons/single.html 中，这些 front matter 字段会被渲染到图标详情页的标题下方（Category 与 Tags 列表），用于图标库的检索与归档，这解释了为什么每个图标都有一个独立 markdown 文档。

SVG 源码剖析：一个 16×16 网格上的实心光盘

disc-fill 的真实图形定义在 icons/disc-fill.svg，完整内容只有 2 行：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-disc-fill" viewBox="0 0 16 16">
  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-6 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0M4 8a4 4 0 0 1 4-4 .5.5 0 0 0 0-1 5 5 0 0 0-5 5 .5.5 0 0 0 1 0m9 0a.5.5 0 1 0-1 0 4 4 0 0 1-4 4 .5.5 0 0 0 0 1 5 5 0 0 0 5-5"/>
</svg>

从路径数据可以推断其绘制逻辑：

• 第一段 M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0 画出一个以 (8, 8) 为圆心、半径 8 的整圆，铺满整个 viewBox，构成“实心”盘体；
• 第二段相对圆弧 m-6 0a2 2 0 ... 在盘体中央勾勒出半径约 2 的圆心区域，形成光盘“标签 + 中心孔”的层次感；
• 后两段则以半径 4 和 0.5 的小圆弧点缀盘面，模拟光盘表面反射纹理。

与描边版 icons/disc.svg（文档见 docs/content/icons/disc.md）对比，后者通过 7 与 8 两个同心圆路径构成“圆环描边 + 中心标签圈”的轮廓样式，而 disc-fill 则是整圆填充，视觉上更厚重、更接近实体光盘。二者共用同一组标签（cd / compact disc / bluray / dvd），开发者可按界面风格自由切换。

以 Web 字体方式使用：class + 码点

Bootstrap Icons 最常见的用法是字体方式。安装后引入 font/bootstrap-icons.min.css（或 font/bootstrap-icons.css），再写：

<i class="bi bi-disc-fill"></i>

该样式在 font/bootstrap-icons.css 中定义为：

.bi-disc-fill::before { content: "\f2fe"; }

对应 SCSS 源码（font/bootstrap-icons.scss）中则是 SASS 映射表的一项：

"disc-fill": "\f2fe",

也就是说，bi-disc-fill 的 ::before 伪元素内容被映射到私有 Unicode 字符 \f2fe，字体文件 font/fonts/bootstrap-icons.woff2 与 font/fonts/bootstrap-icons.woff 中该码位对应的字形正是这张光盘图形。

码点体系：U+F2FE 在四类场景中的写法

Bootstrap Icons 为每个图标维护一份机器可读的码点清单 font/bootstrap-icons.json，其中 disc-fill 的记录为：

"disc-fill": 62206,

62206 的十六进制即 F2FE。在文档模板 docs/layouts/icons/single.html 中，这个数字会被转换为四种等价写法并展示给使用者：

场景	写法
Unicode	U+F2FE
CSS	\f2fe
JavaScript	\uF2FE
HTML 实体	

例如在不依赖 .bi-* 类、直接使用字体字形时，可以这样写：

.my-disc::before {
  font-family: "bootstrap-icons";
  content: "\f2fe";
}

以 SVG 方式使用：内联与 Sprite

内联 SVG

直接将 icons/disc-fill.svg 的内容复制进 HTML，即可获得一个可缩放的矢量图标。由于 SVG 使用 fill="currentColor"，它的颜色会跟随父元素的 color 属性自动变化，无需额外样式：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-disc-fill" viewBox="0 0 16 16">
  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-6 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0M4 8a4 4 0 0 1 4-4 .5.5 0 0 0 0-1 5 5 0 0 0-5 5 .5.5 0 0 0 1 0m9 0a.5.5 0 1 0-1 0 4 4 0 0 1-4 4 .5.5 0 0 0 0 1 5 5 0 0 0 5-5"/>
</svg>

调整 width / height 即可改变显示尺寸，配合 color 样式即可改色，适合在按钮、链接、输入框前缀等组件内部嵌入。

SVG Sprite

整个图标库还打包了一个 Sprite 文件 bootstrap-icons.svg。文档站点的图标列表页正是通过 docs/layouts/partials/icons.html 以 <use> 方式引用其中的 symbol：

<svg class="bi" aria-hidden="true"><use xlink:href="../bootstrap-icons.svg#disc-fill"/></svg>

这种用法适合在一个页面内多次复用时减少 HTTP 请求，且同样支持 currentColor 继承颜色。

安装与项目接入

该图标库通过 npm 分发，安装命令为：

npm i bootstrap-icons

安装后按需引入 CSS 与字体资源（见 font/ 目录），或直接复制 icons/ 下的单个 SVG 使用；在 docs/layouts/partials/home/hero.html 中也展示了同样的安装引导。需要注意：disc-fill 依赖字体文件中 \f2fe 码位对应的字形，若采用纯内联 SVG 方式则无此依赖。

文档站点中的完整渲染链路

当你访问 disc-fill 的图标详情页时，docs/layouts/icons/single.html 会完成以下工作：

1. 通过 readFile "/icons/disc-fill.svg" 读取 SVG 源码并 safeHTML 注入，用于大图预览与示例区展示；
2. 从 font/bootstrap-icons.json 读取码点并格式化为 Unicode / CSS / JS / HTML 四种写法；
3. 生成可直接复制的字体 class 片段 <i class="bi bi-disc-fill"></i>；
4. 提供 Download SVG 按钮与 Copy HTML 区块。

这构成了“文档 → SVG 源文件 → 字体码点 → 使用示例”的完整闭环，也说明该图标在 Bootstrap Icons 中被设计为三形态（字体、Sprite、内联 SVG）全兼容的标准成员，适用于从媒体播放器到数据存储页面的各类 UI 场景。