Bootstrap Icons 的 Capslock fill 图标：SVG 结构、字体与 Codepoint 使用指南

前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载本文聚焦 Bootstrap Icons官方开源 SVG 图标库中capslock-fill大小写锁定填充图标的完整使用方案涵盖其 SVG 源码结构、与capslock描边版的关系、图标字体类名、Unicode 码点以及内联 SVG、icon font、symbol sprite 三种接入方式。读完你将能够在 Bootstrap 5、纯 HTML 或任意前端框架中正确引用该键盘类图标并掌握基于当前仓库源码自行查看、定制图标的方法。1. 图标文档与分类在仓库中capslock-fill的图标文档位于 docs/content/icons/capslock-fill.md其 front matter 定义了图标的元数据--- title: Capslock fill categories: - UI and keyboard tags: - key ---标题titleCapslock fill即「大小写锁定·填充版」用于图标站点的标题、aria-label与面包屑导航。分类categoriesUI and keyboard说明该图标属于用户界面与键盘输入类目适合在设置面板、快捷键提示、键盘状态指示等场景使用。标签tagskey便于按语义检索如按键/键盘相关。该 front matter 会被 Hugo 主题消费仓库的 docs/layouts/icons/single.html 会读取tags与categories渲染到页面顶部并用aria-label{{ .Title }} - large preview为预览区提供无障碍标注。2. SVG 源码结构解析图标的核心源文件是 icons/capslock-fill.svg完整内容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-capslock-fill viewBox0 0 16 16 path dM7.27 1.047a1 1 0 0 1 1.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H11.5v1a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-1H1.654C.78 9.5.326 8.455.924 7.816zM4.5 13.5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1z/ /svg值得注意的源码级细节viewBox0 0 16 16所有 Bootstrap Icons 均采用 16×16 的规范网格保证图标库内部视觉尺寸统一与同仓库其它 2000 图标可直接混排。fillcurrentColor图标使用currentColor作为填充色因此无需修改 SVG 源码即可通过父元素的color属性改变图标颜色这是整套图标库「一个色板走天下」的关键设计。类名bi bi-capslock-fill源文件自带语义化类名既可用于 CSS 选择器也与 icon font 的.bi-*命名体系一一对应。路径含义第一段路径描绘「大写锁定」的经典箭头形指示符——向上尖角指向按下状态主体为一个圆角方块第二段路径表示底部的指示灯横条。从几何上看填充版将这两部分直接以填充方式绘制适合小尺寸下的清晰识别。3. 填充版 vs 描边版仓库同时提供了同主题的描边版 icons/capslock.svg。两者的路径起点相同M7.27 1.047起笔的上尖箭头区别在于对比项capslock-fillcapslock源文件icons/capslock-fill.svgicons/capslock.svg绘制方式填充fill描边fill-ruleevenodd轮廓线视觉特点实心、厚重、小字号下更醒目轻盈、通透、与线条类图标统一字体类名bi bi-capslock-fillbi bi-capslock在 UI 中填充版更适合作为「当前状态已开启」的强调指示例如 Caps Lock 指示灯、开关态图标描边版则适合常规的功能入口。两者成对出现是 Bootstrap Icons 中「fill / 常规」图标族的标准组织方式。4. 三种接入方式与完整代码基于当前仓库的构建产物capslock-fill可以通过以下方式使用。4.1 方式一内联 SVG推荐可控性最强直接复制 icons/capslock-fill.svg 到页面中svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-capslock-fill viewBox0 0 16 16 roleimg aria-labelCaps Lock path dM7.27 1.047a1 1 0 0 1 1.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H11.5v1a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-1H1.654C.78 9.5.326 8.455.924 7.816zM4.5 13.5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1z/ /svg改色将外层元素的color设为目标颜色即可例如stylecolor: #0d6efd。缩放修改width/height或直接使用 CSSfont-size控制的容器配合width1em height1em实现随字号缩放。4.2 方式二Icon font字体类名 码点图标字体由 font/bootstrap-icons.css 等产物提供。样式表中对应规则为.bi-capslock-fill::before { content: \f222; }使用时引入bootstrap-icons.css或bootstrap-icons.min.css后i classbi bi-capslock-fill/i相关的码点信息可通过font/bootstrap-icons.json中capslock-fill: 61986换算即十六进制0xF222表示方式值UnicodeUF222CSS\f222JS\uF222HTML 实体#xF222;在 JS 中可用\uF222拼接字符串在 CSS 内容中则写作content: \f222。Bootstrap Icons 的字体码点落在 Unicode 私有使用区PUA避免与系统字体中的常规字符冲突。4.3 方式三SVG symbol spriteuse引用仓库通过 svg-sprite.json 的 svg-sprite 配置mode.symbol把全部图标合并进 bootstrap-icons.svg。capslock-fill在 sprite 中对应symbol classbi bi-capslock-fill viewBox0 0 16 16 idcapslock-fill ... /symbol页面引入 sprite 后svg width16 height16 fillcurrentColor aria-labelCaps Lock use hrefbootstrap-icons.svg#capslock-fill/use /svguse引用的id与图标文件名一致#capslock-fill一次加载、处处复用适合图标数量较多的应用。5. 在图标站点中的标准渲染单个图标页面由 docs/layouts/icons/single.html 模板驱动它展示了官方推荐的完整用法闭环大图预览以font-size: 10em展示图标并标注roleimg与无障碍标签Examples演示图标与标题、段落文字、链接、按钮、按钮组、输入框前缀等 Bootstrap 组件混排Download SVG提供源 SVG 下载入口Icon font高亮展示i classbi bi-capslock-fill/i的复制即用代码Code point从 font/bootstrap-icons.json 反解码点给出 Unicode / CSS / JS / HTML 四种写法Copy HTML直接展示可粘贴的内联 SVG 源码。该模板对「字体类名」与「码点」的生成逻辑见 single.html依赖仓库构建流程capslock-fill的类名与其 SVG 文件名严格同构因此只要图标源文件存在字体、sprite、码点三套产物就会自动同步使用者无需关心底层映射细节。6. 定制与二次开发提示修改图形直接编辑 icons/capslock-fill.svg 中的d路径即可但需保持viewBox0 0 16 16与fillcurrentColor以维持图标库的一致性约定。批量优化仓库根目录的 svgo.config.mjs 用于构建期对 SVG 做压缩清理新增或修改图标后由构建脚本统一处理。类型支持若在 TypeScript 中按名称引用图标类font/bootstrap-icons.ts 的联合类型包含capslock-fill可据此获得编译期提示。7. 小结capslock-fill是 Bootstrap Icons 中一个典型的「键盘 UI」填充图标它拥有标准的 16×16currentColorSVG 源文件、配套的描边版、icon font 类.bi-capslock-fill、Unicode 码点UF222以及 sprite symbol#capslock-fill三种引用形态。无论是做 Caps Lock 状态指示灯、快捷键面板还是键盘设置界面你都可以依据本文直接在当前仓库的 icons/capslock-fill.svg 与 font/bootstrap-icons.css 中找到现成可用的实现。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 的 Calendar Date Fill 图标SVG 结构、字体 Codepoint 与四种引入方式全解析Bootstrap Icons 的 Calendar Date Fill 图标SVG 结构、字体 Codepoint 与四种引入方式全解析 Bootstrap前端Bootstrap Icons 图标全解析building-fill-x 的 SVG 结构、字体映射与使用指南Bootstrap Icons 图标全解析building fill x 的 SVG 结构、字体映射与使用指南 导读 building fill x 是 Bo前端Bootstrap Icons buildings-fill 图标全解析SVG 结构、字体映射与实战使用Bootstrap Icons buildings fill 图标全解析SVG 结构、字体映射与实战使用 Bootstrap Icons 官方开源 SVG 图前端上一篇Fast-F1 v3.0.x 版本全解析默认缓存、Ergast 完整接入与数据解析体系的重构下一篇EmDash 插件加密设置指南基于 AES-GCM 的 ctx.settings 密钥管理与轮换实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考