Bootstrap Icons 的 caret-down-square 图标：SVG 结构、字体码点与完整使用指南

前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载caret-down-square向下插入符方块是 Bootstrap Icons 图标库中 Carets 分类下的一个基础方向指示图标官方常与 -fill 实心版本搭配使用用于折叠面板、下拉菜单、手风琴等场景的展开指示。本文以该图标的文档页 docs/content/icons/caret-down-square.md 为骨架结合仓库内的 SVG 源码、字体映射表与 Hugo 渲染模板完整讲解它的图形结构、安装方式、四种引用方法以及字体码点换算让读者拿到即可在项目中落地使用。图标概览与文档元数据该图标在文档体系中对应两个页面普通轮廓版 caret-down-square.md 与实心填充版 caret-down-square-fill.md。两个文档页的 frontmatter 定义了完全一致的分类与标签信息title: Caret down square categories: - Carets tags: - caret - arrow - triangle分类categoriesCarets即插入符图标家族与caret-down、caret-up-square、caret-left-fill等同属一组语义上都表示方向性指示。标签tagscaret、arrow、triangle三个关键词共同描述图标形态——本质是一个三角形箭头triangle/arrow以插入符caret风格呈现并放入方形底框中。在 docs/layouts/icons/single.html 中可以看到这类 Markdown 页面是图标详情页的渲染源模板读取 frontmatter 中的title作为页面标题并把tags、categories直接渲染为详情页的元信息列表。也就是说这份简短的文档并非孤立的占位符而是驱动整张图标详情页大图预览、示例区、下载按钮、码点表格等的数据入口。SVG 源码解析轮廓版与实心版的结构差异轮廓版 caret-down-square.svg文件 icons/caret-down-square.svg 的完整内容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-caret-down-square viewBox0 0 16 16 path dM3.626 6.832A.5.5 0 0 1 4 6h8a.5.5 0 0 1 .374.832l-4 4.5a.5.5 0 0 1-.748 0z/ path dM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z/ /svg它由两个path组成箭头三角第一个 path起点M3.626 6.832向右上方绘制到A.5.5的圆弧约束勾勒出顶部宽、底部收窄的向下插入符。注意其中l-4 4.5与-.748的配合使三角形底边对称形成指向正下方的箭头。外框第二个 pathM0 2a2 2 0 0 1 2-2h12...用标准的 2px 圆角矩形路径绘制 16×16 的外框内层再画一圈细线边框a1 1圆弧得到双层描边的描边方块视觉效果。关键属性说明viewBox0 0 16 16图标基于 16×16 的设计网格绘制与整个 Bootstrap Icons 库保持一致见 README.md 中designed on a 16x16px grid的说明。fillcurrentColor填充色跟随文字颜色这是图标能随text-*工具类变色的关键。classbi bi-caret-down-squareSVG 内嵌了字体类名便于与图标字体方式交叉识别。实心版 caret-down-square-fill.svg文件 icons/caret-down-square-fill.svg 则把所有图形合并到单个 pathsvg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-caret-down-square-fill viewBox0 0 16 16 path dM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm4 4a.5.5 0 0 0-.374.832l4 4.5a.5.5 0 0 0 .748 0l4-4.5A.5.5 0 0 0 12 6z/ /svg对比可见fill 版的方框为实心填充z闭合后直接铺满白色箭头三角通过M4 4起笔、a.5.5圆弧约束向内挖空形成。这种单 path 结构在字体化时更利于字形轮廓统一也是官方推荐实心版与轮廓版配对使用的底层原因。安装与引入npm / Composer 两种方式根据 README.md 的说明Bootstrap Icons 发布到 npm 与 PackagistSVG 源文件均经过处理具体渲染由使用方决定。npm推荐npm i bootstrap-iconsComposerPHP 项目composer require twbs/bootstrap-icons安装完成后node_modules/bootstrap-icons下即包含icons/单个 SVG、font/图标字体与 CSS、bootstrap-icons.svgSVG sprite等产物。四种标准使用方式文档体系由 README.md 的 Usage 一节定义支持四种引入路径均适用于 caret-down-square1. 内嵌 SVGCopy HTML直接把图标详情页Copy HTML区块给出的 SVG 源码粘贴进页面如svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-caret-down-square viewBox0 0 16 16 path dM3.626 6.832A.5.5 0 0 1 4 6h8a.5.5 0 0 1 .374.832l-4 4.5a.5.5 0 0 1-.748 0z/ path dM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z/ /svg内嵌方式可自由控制width/height并直接受益于currentColor的继承特性。2.img标签引用img srcicons/caret-down-square.svg altCaret down square width32 height32注意通过img引入时无法用 CSS 修改填充色SVG 以独立文档加载不继承父元素颜色需要换色应改用内嵌或字体方式。3. SVG sprite雪碧图引用根目录下的 bootstrap-icons.svg 中的符号svg classbi width32 height32 fillcurrentColor use xlink:hrefbootstrap-icons.svg#caret-down-square/ /svgsprite 方式与内嵌 SVG 一样支持currentColor换色且多个图标只产生一次网络请求。4. CSS 图标字体Icon font这是详情页模板主推的方式。引入 font/bootstrap-icons.css或 SCSS 版 font/bootstrap-icons.scss后i classbi bi-caret-down-square/i i classbi bi-caret-down-square-fill/iCSS 内部通过::before伪元素注入字形.bi-caret-down-square-fill::before { content: \f22a; } .bi-caret-down-square::before { content: \f22b; }字体方式便于用font-size控制尺寸、用color控制颜色是 Bootstrap 组件生态中最常见的用法。字体码点从 JSON 映射到 CSS / JS / HTML每个图标在 font/bootstrap-icons.json 中都有唯一的十进制码点caret-down-square-fill: 61994, caret-down-square: 61995十进制 61994 与 61995 换算为十六进制分别是0xF22A与0xF22B。详情页模板 docs/layouts/icons/single.html 会读取该 JSON把码点渲染成四种形态形态写法示例轮廓版UnicodeUXXXXUF22BCSS\XXXX\f22bJS\uXXXX\uf22bHTML#xXXXX;#xf22b;这四种写法在自定义字体场景如把bi-caret-down-square字形嵌入手写font-face的私有字体中可直接复用与 CSS 中的content: \f22b完全对应。图标详情页如何生成Hugo 模板中的渲染链路caret-down-square.md 本身只有 8 行 frontmatter但它在构建时被 docs/layouts/icons/single.html 渲染为完整的图标详情页。模板中的关键逻辑大图预览$localSvgPath : printf /icons/%s.svg .File.TranslationBaseName按页面文件名拼出/icons/caret-down-square.svg用readFile读入并直接输出 SVG形成 10em 尺寸的预览区示例区同一份 SVG 被渲染到 Heading、内联文本、链接、按钮、输入组等多种 Bootstrap 组件场景验证图标在不同字号、不同color下的表现下载a href{{ $svgPath }} download提供单个 SVG 的直接下载码点表resources.Get font/bootstrap-icons.json反序列化后按页面名索引出码点并转大写十六进制输出。也就是说本文档页在站内等价于 caret-down-square 图标的官方使用说明书本文已将其中的信息完整继承并落到仓库实现细节上。与 Carets 家族其他图标的搭配同分类下docs/content/icons 中以caret-前缀命名的文档还包括caret-down、caret-up、caret-left、caret-right及各自的-square、-fill变体。caret-down-square与caret-up-square常成对用于折叠面板的展开/收起指示与caret-down-fill相比多了一层方框语义视觉上更接近按钮而非纯箭头。选择时可按以下原则纯箭头指示 →caret-down/caret-down-fill需要方框承载的方向按钮 →caret-down-square/caret-down-square-fill需要实心强调 → 使用-fill版本。小结caret-down-square 是 Bootstrap Icons 中结构清晰、用途明确的一个方向指示图标。本文从它的文档 frontmatter 出发借助 icons/caret-down-square.svg、font/bootstrap-icons.json、font/bootstrap-icons.css 与 docs/layouts/icons/single.html 等仓库文件完整还原了它的路径结构、码点体系与渲染链路。实际项目中内嵌 SVG 与图标字体是最灵活、最常用的两种接入方式而码点表则是在自定义字体或程序化引用时的底层依据。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 的 arrow-down-left-square 图标SVG 结构、码点与六种引用方式实战指南Bootstrap Icons 的 arrow down left square 图标SVG 结构、码点与六种引用方式实战指南 导读 arrow down l前端Bootstrap Icons 的 arrow-down-right-square 图标详解SVG 源码、字体内码与使用实战Bootstrap Icons 的 arrow down right square 图标详解SVG 源码、字体内码与使用实战 本篇技术指南以 Bootstra前端Bootstrap Icons 图标解析align-top顶对齐图标的 SVG 结构、字体码点与使用指南Bootstrap Icons 图标解析align top顶对齐图标的 SVG 结构、字体码点与使用指南 align top 是 Bootstrap Ic前端上一篇PynamoDB本地开发环境搭建免费使用DynamoDB Local下一篇3大核心优势KlakSpout如何解决Unity视频流共享难题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考