前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载本文围绕 Bootstrap Icons 开源仓库中 calendar-check 图标文档 及其同名 SVG 源文件展开系统讲解该图标的视觉结构、字形数据、字体码点以及通过i标签、内联 SVG、CSS 变量等三种主流方式接入项目的方法同时说明它与其兄弟图标如calendar-check-fill、calendar-event、calendar-date的关系帮助你直接在日期选择、预约确认、任务完成等场景中正确选用和落地该图标。文档与图标定位calendar-check日历勾选属于 Bootstrap Icons 官方开源 SVG 图标库中的 Date and time 分类。其文档页 docs/content/icons/calendar-check.md 以 Hugo front matter 形式定义了该图标的元数据--- title: Calendar check categories: - Date and time tags: - date - time - month ---这些元数据在仓库中承担两大作用分类与检索categories: Date and time使图标在官网图库中归入日期时间组tags则提供date、time、month等搜索关键词方便开发者按语义快速定位。页面渲染由 docs/layouts/icons/single.html 读取标题、分类与标签会呈现在每个图标详情页顶部见该模板第 22-27 行的Params.tags/Params.categories处理逻辑。因此这份看似只有几行的文档实际上是整条图标元数据 → 官网详情页 → 下载与代码片段生成流水线的源头。同样结构的文档还覆盖了整个日历系列例如 calendar-check-fill 文档、calendar-event 文档 与 calendar-date 文档它们共用同一分类与检索体系。解析 SVG 源文件图形的构成图标的真实图形定义在 icons/calendar-check.svg 中svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-calendar-check viewBox0 0 16 16 path dM10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0/ path dM3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z/ /svg从源码结构看该图标由两条路径构成分别承担不同视觉职责路径作用关键数据第一条勾选标记check markM10.854 7.146 ... 2.646-2.647用三次相对贝塞尔与直线拼接出对勾第二条日历外框上方的提手环V.5/V1段与主体边框M1 4v10...构成 2×2 圆角矩形需要特别说明的是fillcurrentColor该图标本身不写死颜色而是继承所在元素的color。这一点决定了无论采用字体、内联 SVG 还是 CSS 变量方式图标都能随文字颜色自动适配实现一行代码换色。对比实心版 icons/calendar-check-fill.svg填充版将外框路径改为实心多边形M4 .5a.5.5...M16 14V5...勾选部分则做镂空处理视觉上更厚重适合强调状态、按钮主操作等场景而本图标为线性轮廓版更适合正文、表格、次要提示等轻量场景。使用方式一字体图标最快接入calendar-check 已内置在字体包中。打开 font/bootstrap-icons.css 可以看到字形映射第 254-255 行.bi-calendar-check-fill::before { content: \f1e1; } .bi-calendar-check::before { content: \f1e2; }接入步骤与标准用法一致引入样式与字体资源字体文件位于 font/fonts 下的bootstrap-icons.woff/bootstrap-icons.woff2在 HTML 中直接写i classbi bi-calendar-check/i。该标签在官网详情页模板中由 docs/layouts/icons/single.html 第 117-118 行动态生成i classbi bi-calendar-check/i字体方式的特点是不需要额外 HTML 标签嵌套、支持直接设font-size/color控制大小与颜色适合大量使用图标的场景代价是浏览器需额外加载 woff/woff2 字体文件。使用方式二内联 SVG可控性最强从图标详情页的 Copy HTML 区域docs/layouts/icons/single.html 第 142-147 行你可以直接复制原始 SVG 粘贴进项目。与字体方式相比内联 SVG 的优势是可独立控制每个path的fill、opacity、transform不依赖字体加载避免 FOIT字体闪烁可以配合 CSS 对局部做动画例如让勾选部分单独变色或描边。svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-calendar-check viewBox0 0 16 16 path dM10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0/ path dM3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z/ /svg使用方式三CSS / SCSS 变量对于需要程序化控制字形的场景可直接读取字体映射数据 font/bootstrap-icons.json 中对应的码点字段calendar-check-fill: 61921, calendar-check: 61922, calendar-date: 61924, calendar-event: 61928,将十进制转成十六进制后可得到图标十进制码点UnicodeCSS 转义calendar-check-fill61921UF1E1\f1e1calendar-check61922UF1E2\f1e2因此你也可以用原生 CSS 手动声明.icon-calendar-check::before { content: \f1e2; font-family: bootstrap-icons; }这与仓库中 font/bootstrap-icons.scss 的变量化思路一致方便在 SCSS 工程中按语义命名复用而不是到处硬编码\f1e2。官方示例与场景建议calendar-check.md 文档 的tagsdate / time / month暗示了它的典型语义日期相关功能中的确认状态。结合 docs/layouts/icons/single.html 第 46-106 行的 Examples 区域官方展示了该图标在标题、内联文本、链接、按钮与输入框前缀等位置的用法推荐落地场景包括日期选择器已选中/已确认的日期上展示勾选预约与日程会议、行程确认成功的反馈提示表单校验日期字段输入合法的成功标识月度视图与calendar-month、calendar-week等系列图标搭配使用构建完整的日历操作条。当需要更强的视觉权重时可无缝替换为calendar-check-fill字体类名bi-calendar-check-fill码点\f1e1两者图形语义一致切换成本为零。小结calendar-check是 Bootstrap Icons 日历系列中语义明确、实现轻量的一个成员其文档 front matter 定义了分类与检索信息SVG 源文件以两条路径勾选 日历框构成图形字体层通过码点\f1e2UF1E2与 CSS 伪元素绑定。你可以按场景自由选择字体标签、内联 SVG 或 CSS/SCSS 变量三种接入方式并借助fillcurrentColor实现随上下文自动换色将其自然融入日期、日程、表单等业务界面。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 日历删除图标 calendar-x 完全指南SVG 结构、字体码点与五类实战用法Bootstrap Icons 日历删除图标 calendar x 完全指南SVG 结构、字体码点与五类实战用法 calendar x 是 Bootstrap前端Bootstrap Icons 日历删除图标 calendar2-xSVG 源码、字体码点与页面集成详解Bootstrap Icons 日历删除图标 calendar2 xSVG 源码、字体码点与页面集成详解 本篇技术指南聚焦 Bootstrap 开源图标库B前端Bootstrap Icons 之 Backspace Reverse 图标SVG 结构、字体码点与实战用法详解Bootstrap Icons 之 Backspace Reverse 图标SVG 结构、字体码点与实战用法详解 在 Bootstrap Icons 官方开源前端上一篇如何高效配置Intel RealSense JSON参数从入门到精通的实用指南下一篇API网关性能优化实战从响应延迟到毫秒级加速创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考