前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载本文以 Bootstrap Icons 官方开源仓库中的 check2-circle 图标文档 为骨架系统讲解该图标的前言元数据标题、分类、标签、SVG 源码结构与绘制原理、字体码点映射以及内嵌 SVG、img引用、SVG Sprite 与 CSS 字体四种完整接入方式并给出基于仓库源码的可验证依据与可直接复制运行的代码示例。读完本文你将掌握如何在项目中正确引用bi-check2-circle图标并理解其底层实现。一、check2-circle 图标档案check2-circle是 Bootstrap Icons 官方开源 SVG 图标库中的一个基础图标属于「UI and keyboard界面与键盘」分类通常用于表示勾选、完成、选择与复选框等状态语义。该图标在仓库中的元数据定义位于 docs/content/icons/check2-circle.mdHugo 前言格式--- title: Check2 circle categories: - UI and keyboard tags: - checkmark - todo - select - done - checkbox ---titleCheck2 circle用于图标页面标题与文档渲染。categoriesUI and keyboard代表该图标服务于用户界面与键盘交互语义。tagscheckmark勾选标记、todo待办、select选择、done完成、checkbox复选框这些标签用于文档站点的检索与归类。从标签语义可见check2-circle适合用在待办清单、表单校验、多选列表、状态回执等已完成/已选中场景。二、SVG 源码结构与绘制原理check2-circle的实际 SVG 源码位于 icons/check2-circle.svg完整内容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-check2-circle viewBox0 0 16 16 path dM2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0/ path dM15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z/ /svg该图标的绘制结构可以从源码中直接观察画布与视图width16 height16表明图标基于 16×16 网格设计viewBox0 0 16 16定义了坐标空间。这是 Bootstrap Icons 所有图标的统一设计规范16px 栅格。填充方式fillcurrentColor是关键特性——图标颜色继承所在元素的color样式因此无需为每种颜色单独制作一份 SVG。类名classbi bi-check2-circle与图标名对应便于通过 CSS 选择器识别与定制。路径一外圆环M2.5 8a5.5 5.5 0 0 1 8.25-4.764 ...绘制出一个非实心圆环圆环线宽由两次5.5半径的圆弧描边逻辑决定起点(2.5, 8)以5.5半径与-4.764偏移完成顶部圆弧再通过6.5半径的完整圆闭合视觉上呈现空心圆外框。路径二对勾M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z是标准的对勾笔画从右上角(15.354, 3.354)出发经三次贝塞尔/直线段依次落到(8, 9.293)、(5.354, 6.646)最后收笔回(8, 9.293)并闭合形成√形勾线。对比同系列图标可以更好理解它的定位check2.svg只有对勾、无圆环属于「Check2」纯勾选标记check.svg仅一个勾选路径是更早期的check基础款check-circle-fill.svg实心圆 对勾强调已完成状态check2-circle空心圆 细对勾线条感更轻适合需要弱化强调、仅作为辅助标记的场景。三、字体码点Unicode、CSS 与 JS 中的引用除了直接使用 SVG 文件check2-circle也被打包进图标字体Icon Font通过码点codepoint引用。3.1 码点映射在字体码点映射文件 font/bootstrap-icons.json 中check2-circle: 62064即十进制 62064。62064 换算为十六进制是0xF270这与 CSS 中的字体映射完全一致。3.2 四种引用形式根据文档站点图标页面的「Code point」区块逻辑见 docs/layouts/icons/single.html同一码点F270在 HTML/CSS/JS 中分别写作形式写法说明UnicodeUF270图标字体中的 Unicode 编号CSS\f270CSScontent属性中的转义写法JS\uf270JavaScript 字符串中的转义写法HTML#xF270;HTML 实体写法3.3 CSS 字体中的实际使用在字体样式表 font/bootstrap-icons.css 中可以看到.bi-check2-circle::before { content: \f270; }因此只要在页面中引入字体与样式即可通过以下方式渲染图标!-- 引入字体样式 -- link relstylesheet hreffont/bootstrap-icons.css !-- 使用图标 -- i classbi bi-check2-circle/ii元素本身没有内容::before伪元素会写入码点\f270再借助bootstrap-icons.css中定义的font-face字体见 font/ 下的bootstrap-icons.woff2与bootstrap-icons.woff完成字形渲染。同一套码点数据还以 font/bootstrap-icons.ts 的形式提供方便 TypeScript 项目读取。注意字体方案的渲染结果受字体文件加载影响图标颜色与尺寸由字体继承决定如果需要精确控制 SVG 路径、渐变或多色效果请优先使用下面第四部分的 SVG 接入方式。四、四种实战接入方式可直接复制运行根据仓库根目录 README.md 的「Usage」说明Bootstrap Icons 支持四种接入方式。以check2-circle为例逐一演示。4.1 方式一内嵌 SVGCopy HTML将 icons/check2-circle.svg 的源码直接粘贴进 HTML 中。因为使用fillcurrentColor颜色跟随color属性svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-check2-circle viewBox0 0 16 16 path dM2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0/ path dM15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z/ /svg修改颜色只需设置父元素 CSS.status-done { color: #198754; } /* Bootstrap success 绿色 */4.2 方式二通过img引用img srcicons/check2-circle.svg altCheck2 circle width16 height16注意通过img引用时fillcurrentColor无法生效图片上下文没有color此时图标会使用 SVG 文件自身的填充色即黑色因此如需改变颜色应改用内嵌或 Sprite 方式。4.3 方式三SVG Sprite雪碧图仓库根目录提供了合并后的雪碧图文件 bootstrap-icons.svg。Sprite 方式允许颜色继承且可复用svg classbi width16 height16 fillcurrentColor use xlink:hrefbootstrap-icons.svg#check2-circle/ /svg使用 Sprite 时颜色同样受fillcurrentColor控制通过外层元素的color即可统一换色Sprite 也便于同一页面多次复用图标而只请求一次资源。4.4 方式四CSS 字体Icon Fontlink relstylesheet hreffont/bootstrap-icons.css i classbi bi-check2-circle/i字体方式无需修改 HTML 结构即可通过::before自动注入字形适合列表、按钮等批量场景。若要放大通过font-size控制即可.bi-check2-circle { font-size: 2rem; }五、在表单与状态 UI 中的组合示例结合check2-circle的checkbox / select / done / todo语义常见用法是配合按钮、输入框前缀或状态列表!-- 状态行 -- li classd-flex align-items-center text-success svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-check2-circle me-2 viewBox0 0 16 16 path dM2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0/ path dM15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z/ /svg 任务已完成 /li !-- 输入框前缀 -- div classinput-group span classinput-group-texti classbi bi-check2-circle/i/span input typetext classform-control placeholder输入校验内容 /div文档站点自身也在图标详情页docs/layouts/icons/single.html展示了同一图标在不同字号、标题、链接、按钮与输入组场景下的渲染示例——这证明该图标在真实 UI 中的适配是经过模板化验证的。六、下载与二次编辑在文档站点的图标详情页中「Download」区块提供了 SVG 文件的直接下载入口对应single.html中的Download SVG按钮其链接指向assets下/icons/check2-circle.svg。你可以直接从仓库下载 icons/check2-circle.svg在 Figma / Illustrator 中打开基于 16×16 网格二次修改修改后如要重新生成字体与 Sprite可在仓库中运行npm run icons见 README.md 的 npm scripts 说明该脚本会调用 SVGO 优化 SVG 并重新生成 font/ 与 bootstrap-icons.svg。七、小结维度check2-circle 关键信息仓库依据分类UI and keyboarddocs/content/icons/check2-circle.md语义标签checkmark / todo / select / done / checkbox同上SVG 文件16×16、fillcurrentColor、空心圆 对勾icons/check2-circle.svg字体码点十进制 62064UF270font/bootstrap-icons.jsonCSS 伪元素.bi-check2-circle::before { content: \f270; }font/bootstrap-icons.css接入方式内嵌 SVG /img/ SVG Sprite / CSS 字体README.mdcheck2-circle是一个轻量、语义清晰、换色灵活的勾选状态图标。理解了它的 SVG 路径结构与字体码点映射你就能在 Bootstrap Icons 体系中举一反三正确使用同系列的所有图标。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 之 Backspace Reverse 图标SVG 结构、字体码点与实战用法详解Bootstrap Icons 之 Backspace Reverse 图标SVG 结构、字体码点与实战用法详解 在 Bootstrap Icons 官方开源前端Bootstrap Icons 的 Calendar2 check 图标详解SVG 结构、图标字体与代码点实战Bootstrap Icons 的 Calendar2 check 图标详解SVG 结构、图标字体与代码点实战 本篇文章围绕 Bootstrap Icons前端Bootstrap Icons 中的 Backpack2 图标SVG 结构、字体码点与四种使用方式详解Bootstrap Icons 中的 Backpack2 图标SVG 结构、字体码点与四种使用方式详解 Backpack2 是 Bootstrap Icons前端上一篇ChanlunX通达信插件3分钟掌握缠论量化分析的终极武器下一篇缠论分析自动化终极指南5分钟让通达信变身智能缠论分析平台创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Bootstrap Icons 中 check2-circle 图标详解：SVG 结构、字体码点与实战用法
前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载本文以 Bootstrap Icons 官方开源仓库中的 check2-circle 图标文档 为骨架系统讲解该图标的前言元数据标题、分类、标签、SVG 源码结构与绘制原理、字体码点映射以及内嵌 SVG、img引用、SVG Sprite 与 CSS 字体四种完整接入方式并给出基于仓库源码的可验证依据与可直接复制运行的代码示例。读完本文你将掌握如何在项目中正确引用bi-check2-circle图标并理解其底层实现。一、check2-circle 图标档案check2-circle是 Bootstrap Icons 官方开源 SVG 图标库中的一个基础图标属于「UI and keyboard界面与键盘」分类通常用于表示勾选、完成、选择与复选框等状态语义。该图标在仓库中的元数据定义位于 docs/content/icons/check2-circle.mdHugo 前言格式--- title: Check2 circle categories: - UI and keyboard tags: - checkmark - todo - select - done - checkbox ---titleCheck2 circle用于图标页面标题与文档渲染。categoriesUI and keyboard代表该图标服务于用户界面与键盘交互语义。tagscheckmark勾选标记、todo待办、select选择、done完成、checkbox复选框这些标签用于文档站点的检索与归类。从标签语义可见check2-circle适合用在待办清单、表单校验、多选列表、状态回执等已完成/已选中场景。二、SVG 源码结构与绘制原理check2-circle的实际 SVG 源码位于 icons/check2-circle.svg完整内容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-check2-circle viewBox0 0 16 16 path dM2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0/ path dM15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z/ /svg该图标的绘制结构可以从源码中直接观察画布与视图width16 height16表明图标基于 16×16 网格设计viewBox0 0 16 16定义了坐标空间。这是 Bootstrap Icons 所有图标的统一设计规范16px 栅格。填充方式fillcurrentColor是关键特性——图标颜色继承所在元素的color样式因此无需为每种颜色单独制作一份 SVG。类名classbi bi-check2-circle与图标名对应便于通过 CSS 选择器识别与定制。路径一外圆环M2.5 8a5.5 5.5 0 0 1 8.25-4.764 ...绘制出一个非实心圆环圆环线宽由两次5.5半径的圆弧描边逻辑决定起点(2.5, 8)以5.5半径与-4.764偏移完成顶部圆弧再通过6.5半径的完整圆闭合视觉上呈现空心圆外框。路径二对勾M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z是标准的对勾笔画从右上角(15.354, 3.354)出发经三次贝塞尔/直线段依次落到(8, 9.293)、(5.354, 6.646)最后收笔回(8, 9.293)并闭合形成√形勾线。对比同系列图标可以更好理解它的定位check2.svg只有对勾、无圆环属于「Check2」纯勾选标记check.svg仅一个勾选路径是更早期的check基础款check-circle-fill.svg实心圆 对勾强调已完成状态check2-circle空心圆 细对勾线条感更轻适合需要弱化强调、仅作为辅助标记的场景。三、字体码点Unicode、CSS 与 JS 中的引用除了直接使用 SVG 文件check2-circle也被打包进图标字体Icon Font通过码点codepoint引用。3.1 码点映射在字体码点映射文件 font/bootstrap-icons.json 中check2-circle: 62064即十进制 62064。62064 换算为十六进制是0xF270这与 CSS 中的字体映射完全一致。3.2 四种引用形式根据文档站点图标页面的「Code point」区块逻辑见 docs/layouts/icons/single.html同一码点F270在 HTML/CSS/JS 中分别写作形式写法说明UnicodeUF270图标字体中的 Unicode 编号CSS\f270CSScontent属性中的转义写法JS\uf270JavaScript 字符串中的转义写法HTML#xF270;HTML 实体写法3.3 CSS 字体中的实际使用在字体样式表 font/bootstrap-icons.css 中可以看到.bi-check2-circle::before { content: \f270; }因此只要在页面中引入字体与样式即可通过以下方式渲染图标!-- 引入字体样式 -- link relstylesheet hreffont/bootstrap-icons.css !-- 使用图标 -- i classbi bi-check2-circle/ii元素本身没有内容::before伪元素会写入码点\f270再借助bootstrap-icons.css中定义的font-face字体见 font/ 下的bootstrap-icons.woff2与bootstrap-icons.woff完成字形渲染。同一套码点数据还以 font/bootstrap-icons.ts 的形式提供方便 TypeScript 项目读取。注意字体方案的渲染结果受字体文件加载影响图标颜色与尺寸由字体继承决定如果需要精确控制 SVG 路径、渐变或多色效果请优先使用下面第四部分的 SVG 接入方式。四、四种实战接入方式可直接复制运行根据仓库根目录 README.md 的「Usage」说明Bootstrap Icons 支持四种接入方式。以check2-circle为例逐一演示。4.1 方式一内嵌 SVGCopy HTML将 icons/check2-circle.svg 的源码直接粘贴进 HTML 中。因为使用fillcurrentColor颜色跟随color属性svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-check2-circle viewBox0 0 16 16 path dM2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0/ path dM15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z/ /svg修改颜色只需设置父元素 CSS.status-done { color: #198754; } /* Bootstrap success 绿色 */4.2 方式二通过img引用img srcicons/check2-circle.svg altCheck2 circle width16 height16注意通过img引用时fillcurrentColor无法生效图片上下文没有color此时图标会使用 SVG 文件自身的填充色即黑色因此如需改变颜色应改用内嵌或 Sprite 方式。4.3 方式三SVG Sprite雪碧图仓库根目录提供了合并后的雪碧图文件 bootstrap-icons.svg。Sprite 方式允许颜色继承且可复用svg classbi width16 height16 fillcurrentColor use xlink:hrefbootstrap-icons.svg#check2-circle/ /svg使用 Sprite 时颜色同样受fillcurrentColor控制通过外层元素的color即可统一换色Sprite 也便于同一页面多次复用图标而只请求一次资源。4.4 方式四CSS 字体Icon Fontlink relstylesheet hreffont/bootstrap-icons.css i classbi bi-check2-circle/i字体方式无需修改 HTML 结构即可通过::before自动注入字形适合列表、按钮等批量场景。若要放大通过font-size控制即可.bi-check2-circle { font-size: 2rem; }五、在表单与状态 UI 中的组合示例结合check2-circle的checkbox / select / done / todo语义常见用法是配合按钮、输入框前缀或状态列表!-- 状态行 -- li classd-flex align-items-center text-success svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-check2-circle me-2 viewBox0 0 16 16 path dM2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0/ path dM15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z/ /svg 任务已完成 /li !-- 输入框前缀 -- div classinput-group span classinput-group-texti classbi bi-check2-circle/i/span input typetext classform-control placeholder输入校验内容 /div文档站点自身也在图标详情页docs/layouts/icons/single.html展示了同一图标在不同字号、标题、链接、按钮与输入组场景下的渲染示例——这证明该图标在真实 UI 中的适配是经过模板化验证的。六、下载与二次编辑在文档站点的图标详情页中「Download」区块提供了 SVG 文件的直接下载入口对应single.html中的Download SVG按钮其链接指向assets下/icons/check2-circle.svg。你可以直接从仓库下载 icons/check2-circle.svg在 Figma / Illustrator 中打开基于 16×16 网格二次修改修改后如要重新生成字体与 Sprite可在仓库中运行npm run icons见 README.md 的 npm scripts 说明该脚本会调用 SVGO 优化 SVG 并重新生成 font/ 与 bootstrap-icons.svg。七、小结维度check2-circle 关键信息仓库依据分类UI and keyboarddocs/content/icons/check2-circle.md语义标签checkmark / todo / select / done / checkbox同上SVG 文件16×16、fillcurrentColor、空心圆 对勾icons/check2-circle.svg字体码点十进制 62064UF270font/bootstrap-icons.jsonCSS 伪元素.bi-check2-circle::before { content: \f270; }font/bootstrap-icons.css接入方式内嵌 SVG /img/ SVG Sprite / CSS 字体README.mdcheck2-circle是一个轻量、语义清晰、换色灵活的勾选状态图标。理解了它的 SVG 路径结构与字体码点映射你就能在 Bootstrap Icons 体系中举一反三正确使用同系列的所有图标。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 之 Backspace Reverse 图标SVG 结构、字体码点与实战用法详解Bootstrap Icons 之 Backspace Reverse 图标SVG 结构、字体码点与实战用法详解 在 Bootstrap Icons 官方开源前端Bootstrap Icons 的 Calendar2 check 图标详解SVG 结构、图标字体与代码点实战Bootstrap Icons 的 Calendar2 check 图标详解SVG 结构、图标字体与代码点实战 本篇文章围绕 Bootstrap Icons前端Bootstrap Icons 中的 Backpack2 图标SVG 结构、字体码点与四种使用方式详解Bootstrap Icons 中的 Backpack2 图标SVG 结构、字体码点与四种使用方式详解 Backpack2 是 Bootstrap Icons前端上一篇ChanlunX通达信插件3分钟掌握缠论量化分析的终极武器下一篇缠论分析自动化终极指南5分钟让通达信变身智能缠论分析平台创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
