新闻详情

新闻详情

首页 / 资讯中心 / 详情

Bootstrap Icons 的 Arrow Clockwise 图标全解析:SVG 结构、字体码点与四种接入方式

发布时间:2026/9/26 6:46:22来源:尧图网络
Bootstrap Icons 的 Arrow Clockwise 图标全解析:SVG 结构、字体码点与四种接入方式
前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载Arrow Clockwise 是 Bootstrap Icons 官方 SVG 图标库中用于表达顺时针旋转 / 刷新 / 重做语义的箭头图标归属于 Arrows箭头分类。本文以 图标文档页 为核心结合仓库中的 SVG 源文件、字体生成产物 与 图标详情页模板完整讲解它的图形结构、在字体中的编码位置以及内联 SVG、img、SVG Sprite、Icon Font 四种接入方式读完后你可以直接在 Bootstrap 项目中独立使用并二次定制该图标。图标速览定位与语义在 docs/content/icons/arrow-clockwise.md 的 Hugo Front Matter 中该图标被定义为title: Arrow clockwise categories: - Arrows tags: - arrow - right - spin - turn - around - round - rotate - refresh - reload - redo标题Arrow clockwise顺时针箭头分类categoriesArrows与arrow-down、arrow-up、arrow-repeat等处于同一类目标签tagsarrow、right、spin、turn、around、round、rotate、refresh、reload、redo。从标签可以清晰推断该图标的设计意图它描述的是箭头绕中心顺时针转一圈回到起点的形态语义上常用于刷新refresh、重新加载reload、重做redo等循环操作。它的孪生兄弟是 arrow-counterclockwise 图标后者标签含left、undo表达逆时针旋转与撤销undo语义。两者成对出现恰好覆盖了浏览器前进 / 刷新与后退 / 撤销这类对称交互。SVG 源文件解剖16×16 画布上的两段路径该图标的矢量源文件位于 icons/arrow-clockwise.svg完整内容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-arrow-clockwise viewBox0 0 16 16 path fill-ruleevenodd dM8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z/ path dM8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466/ /svg逐段解读根元素属性width16 height16与viewBox0 0 16 16共同构成 16×16 的标准网格fillcurrentColor让图标颜色跟随父元素的color属性这是 Bootstrap Icons 全库统一遵循的着色约定README 中说明新字形先按 16×16 网格设计再导出为fill无 stroke的扁平 SVGclassbi bi-arrow-clockwise是图标专属类名同时服务于字体方式的选择器匹配。第一段路径弧形轨道fill-ruleevenodd配合M8 3a5 5 0 1 0 4.546 2.914...A6 6 0 1 1 8 2z以(8,3)为起点绘制一段 5 半径的圆环弧再通过更大的 6 半径弧线闭合形成缺一口的圆环——即箭头所循的旋转轨道。第二段路径箭头头部M8 4.466V.534先竖直向上移动到圆周顶端然后a.25.25 0 0 1 .41-.192与l2.36 1.966等指令勾画出向右上方指向的三角箭头头部并用z闭合构成顺时针方向的箭头尖。两段路径相加最终视觉上是一个顺时针旋转的环形箭头圆环暗示转圈箭头尖明确方向。这种纯path实现保证了图标在任意缩放下都是矢量清晰、可着色的。图标字体中的编码从 UF116 到四种写法Bootstrap Icons 除了提供独立 SVG 文件还会在构建时把所有图标合并生成 Web FontWOFF/WOFF2及配套的 CSS、SCSS、JSON、TypeScript 声明。Arrow Clockwise 在各字体产物中的记录如下文件位置内容font/bootstrap-icons.css第 51 行.bi-arrow-clockwise::before { content: \f116; }font/bootstrap-icons.min.css压缩版同名规则由cleancss压缩生成font/bootstrap-icons.scss第 58 行arrow-clockwise: \f116,Sass map 条目font/bootstrap-icons.json第 24 行arrow-clockwise: 61718,十进制码点font/bootstrap-icons.ts第 80 行\| arrow-clockwise联合类型成员十进制 61718 对应的十六进制正是UF116。docs/layouts/icons/single.html第 121–139 行会从该 JSON 读出码点并自动渲染出四种编程写法这也是引用该图标字体时的标准写法UnicodeUF116CSS\f116写在content属性中JS\uF116HTML#xF116;其中 CSS 写法已由上面的.bi-arrow-clockwise::before规则替你封装好日常使用只需写一个带类名的i标签即可详见下一节。TS 声明则让 TypeScript 项目可以对图标类名做静态类型约束。四种接入方式实战按 README.md 中的使用说明Bootstrap Icons 支持四种接入方式Arrow Clockwise 均适用1. 内联 SVG推荐可完全控制直接把 icons/arrow-clockwise.svg 的内容粘贴进 HTML即可获得零额外依赖、可被 CSS 完全控制的图标svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-arrow-clockwise viewBox0 0 16 16 path fill-ruleevenodd dM8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z/ path dM8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466/ /svg因为使用了currentColor只需设置父元素或图标自身的color即可改色width/height可任意调整以改变尺寸。2. 通过img引用图标也可作为普通图片引用但此时无法用 CSS 改色沿用 SVG 源文件中的currentColor默认解析为黑色img src/icons/arrow-clockwise.svg altArrow clockwise width16 height163. 使用 SVG Sprite仓库根目录的 bootstrap-icons.svg 是由svg-sprite构建工具见 svg-sprite.json 与npm run icons-sprite生成的雪碧图。用use引用其中的符号即可svg classbi width16 height16 fillcurrentColor use xlink:href/bootstrap-icons.svg#arrow-clockwise/ /svg4. 使用 Icon FontCSS安装并引入字体后最简洁的写法是一个i标签。图标详情页模板 single.html第 113–119 行自动生成的示例片段就是i classbi bi-arrow-clockwise/i前提是已加载 font/bootstrap-icons.css或其压缩版 font/bootstrap-icons.min.css且浏览器能拿到 fonts 目录 下的 WOFF2/WOFF 字体文件。该方式借助.bi::before的content: \f116伪元素渲染字形并内置了vertical-align: -.125em等对齐微调。字体方式渲染的是 F116 码点的字体字形与内联 SVG 的路径形态一致但无法对字形内部路径做精细 CSS 动画需要旋转、描边等高级效果时优先选内联 SVG。使用场景与扩展技巧结合标签语义与图标形态Arrow Clockwise 的典型用法包括刷新 / 重新加载按钮配合旋转动画可强化正在刷新的反馈例如button typebutton classbtn btn-outline-secondary onclicklocation.reload() i classbi bi-arrow-clockwise/i 刷新 /button重做redo操作与 arrow-counterclockwise 图标逆时针、标签含undo成对出现在撤销 / 重做工具栏中。进度 / 同步指示给图标加上transform: rotate()的 CSS 过渡或动画即可表达转圈加载中。需要说明的是以上场景属于基于图标语义的合理应用推断仓库本身不包含动画或按钮封装的现成组件动画逻辑需要由使用方自行实现。图标详情页是如何生成的Bootstrap Icons 文档站为每一个图标生成独立的 permalink 页面由npm run pages触发的build/build-pages.mjs完成README 中的 npm scripts 表格有说明。arrow-clockwise.md 正是该图标的模板 Markdown 源文件——它只承载 Front Matter 元数据正文内容由 docs/layouts/icons/single.html 模板统一渲染标题与元数据{{ .Title }}输出页面标题Tags与Category取自 Front Matter模板第 22–27 行大图预览与示例模板通过readFile直接读取/icons/arrow-clockwise.svg并内嵌展示第 36–38 行随后在Examples区展示它与标题、段落文字、按钮、输入框组合的效果下载与代码片段右侧栏提供 SVG 下载链接、Icon Font 的i片段、四进制码点表以及可直接复制的内联 SVG HTML第 108–148 行。这套Front Matter 元数据 统一模板渲染的架构意味着想要新增或修改图标说明只需维护docs/content/icons/下的 Markdown 文件与 icons/ 目录中的 SVG 源文件页面呈现由模板自动完成。而修改图标字形本身时需执行npm run iconsSVGO 优化、字体与 sprite 重新生成来同步刷新 font/ 下的全部产物这正是 README 中描述的构建流程。小结Arrow Clockwise 是 Bootstrap Icons 中实现顺时针旋转 / 刷新 / 重做语义的标准图标其 16×16 画布上由弧形轨道与箭头头部两段path构成并统一使用currentColor着色。在仓库的字体产物中它对应码点UF116可通过 CSS 类bi bi-arrow-clockwise、内联 SVG、img或 SVG Sprite 四种方式接入。理解它的 SVG 结构与码点体系后你不仅能直接复用还能参照同一模式快速查阅和使用其余 2000 个 Bootstrap Icons 图标。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons图标字体生成从SVG到WOFF2全流程Bootstrap Icons图标字体生成从SVG到WOFF2全流程 你是否还在为项目中的图标管理烦恼手动处理大量SVG图标不仅耗时还难以保证一致性和性能前端Bootstrap Icons图标字体生成工具从SVG到字体文件Bootstrap Icons图标字体生成工具从SVG到字体文件 你还在为项目中图标管理混乱而烦恼吗手动转换SVG图标为字体文件总是出错本文将带你一步掌握前端Bootstrap Icons图标字体化终极指南从SVG到可复用字体Bootstrap Icons图标字体化终极指南从SVG到可复用字体 还在为Web项目中图标管理效率低下而困扰吗Bootstrap Icons提供了完整的S前端上一篇微信聊天记录永久保存终极指南免费开源工具完整使用教程下一篇终极指南Node.js Native Abstractions (NAN) 项目常见问题解决方案创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

从“能聊”到“能干活”:AI Agent 的工程化改造指南 2026/9/26 7:23:34

从“能聊”到“能干活”:AI Agent 的工程化改造指南

上次清理旧项目时,我翻出一个当时觉得特别得意的对话机器人。它能记住用户三天前说过喜欢什么口味的咖啡,连上周聊到一半的电影都能接上话。但当我让它把桌面上一个 CSV 按规则清洗后发到我邮箱时,它卡住了,只回了一句“我可以帮你…

阅读更多 →
从会聊天到能开工:个人Agent架构、记忆与工具封装实战 2026/9/26 7:23:33

从会聊天到能开工:个人Agent架构、记忆与工具封装实战

我先说明一下,目前“纯白文输出”和“真实场景内容”往往是矛盾的:越是真实自然的内容,越需要具体上下文和语气;而纯结构化输出会自带“模板感”,所以我尽量按“从业者分享帖”的口吻来写,尽量保持自然。1.…

阅读更多 →
当Claude参与造Claude:FDE岗位与Claude Code实战解析 2026/9/26 7:23:32

当Claude参与造Claude:FDE岗位与Claude Code实战解析

1. 从“Claude 参与造 Claude”说起:这个标题到底在聊什么第一次看到“当 Claude 开始参与造 Claude”这个说法,我脑子里冒出来的画面是流水线上机械臂组装机械臂。听起来有点科幻,但拆开看其实很朴素:AI 模型开始被用来辅助开发、…

阅读更多 →
快递包裹目标检测数据集:YOLO格式与训练实践全解读 2026/9/26 7:23:32

快递包裹目标检测数据集:YOLO格式与训练实践全解读

简介:面向智能物流、仓储机器人与目标检测开发者的快递包裹目标检测数据集,覆盖分拣传送带、仓库管理等真实场景,聚焦袋子、箱子、标签三类核心目标。共366张已标注图片,其中训练集276张、验证集60张、测试集30张,全部…

阅读更多 →
3524张真实笔记本电脑检测数据集(VOC+YOLO双格式) 2026/9/26 7:23:32

3524张真实笔记本电脑检测数据集(VOC+YOLO双格式)

简介:本资源是一套专为计算机视觉目标检测任务设计的笔记本电脑图像数据集,适用于YOLO、Faster R-CNN等主流模型的训练与验证,面向深度学习初学者、算法工程师及课程实验开发者。数据集共3524张高质量JPG图像,全部标注为单类别“l…

阅读更多 →
AI记忆体系设计:短期、长期与永久记忆分层实践 2026/9/26 7:23:25

AI记忆体系设计:短期、长期与永久记忆分层实践

我接手过不少Agent项目,发现"AI记忆"这个词被使用得太模糊了。有人想要的是对话上下文别断,有人想要的是跨天回访时还记得用户偏好,还有人想让Agent记住项目里所有历史决策,这其实是三种完全不同的工程问题。把记忆当成…

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉