首页/新闻资讯/正文详情

Bootstrap Icons 图标深度解析:arrows-angle-expand 的 SVG 路径、字体码点与集成方式

发布时间:2026/9/27 7:06:18 来源:云帆数科 栏目:资讯中心
Bootstrap Icons 图标深度解析:arrows-angle-expand 的 SVG 路径、字体码点与集成方式
前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载arrows-angle-expand是 Bootstrap Icons 官方开源图标库中一枚用于表达对角展开 / 全屏放大语义的箭头图标被归类在 Arrows箭头类别下核心标签为arrow与resize。本文以仓库中的图标元数据文档 docs/content/icons/arrows-angle-expand.md 为骨架结合其 SVG 源码、字体码点、文档页渲染模板与构建脚本完整拆解这枚图标的实现原理并给出可直接落地的四种集成方式内联 SVG、img、SVG Sprite、Web Font帮助你在自己的项目中准确复用与二次编辑。图标元数据标题、分类与标签仓库中每个图标都对应docs/content/icons/目录下的一份 Markdown 文件arrows-angle-expand的元数据文档全文如下--- title: Arrows angle expand categories: - Arrows tags: - arrow - resize ---title标题Arrows angle expand即箭头 · 对角展开。作为文档页的 H1 标题、浏览器标签标题以及图标检索的关键词。categories分类Arrows与 icons/arrows-angle-contract.svg对角收缩、icons/arrow-down-up.svg 等一起构成 Bootstrap Icons 的箭头图标族。tags标签arrow与resize。resize明确点出这枚图标的典型应用场景——窗口/面板的全屏放大、画布缩放、媒体播放器的最大化按钮。这份 front matter 本身并不直接渲染页面内容而是由 Hugo 模板消费。在 docs/layouts/icons/single.html 中.Params.tags与.Params.categories会被渲染成页面的 Tags / Category 元信息列表供访问者快速了解图标语义并跳转到相关分类。图标语义展开与收缩的对角表达与语义相对的 icons/arrows-angle-contract.svg 不同arrows-angle-expand描绘的是从中心向四个对角方向外扩的动作左上箭头向左上角伸展右下箭头向右下角伸展整体视觉语言对应放大、扩展、全屏。这一对图标常用于 UI 中的视图切换按钮——点击expand进入全屏点击contract退出全屏是媒体播放器、编辑器、仪表盘组件中非常高频的交互控件。两个文件同属Arrows分类、共享arrow/resize标签正好形成同一动作的正反两个方向在设计稿中通常成对使用。SVG 源码逐段拆解16×16 网格上的偶数奇偶路径图标本体存放在 icons/arrows-angle-expand.svg内容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-arrows-angle-expand viewBox0 0 16 16 path fill-ruleevenodd dM5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707/ /svg画布规格width16 height16viewBox0 0 16 16。Bootstrap Icons 的所有图标都基于 16×16 的网格设计见 README.md 中New glyphs are designed in Figma first on a 16x16px grid的说明便于在 1x、2x 乃至任意 DPR 下保持锐利。着色方式fillcurrentColor意味着图标颜色继承所在元素的color只需修改文字颜色即可完成图标换色。单一 path fill-ruleevenodd整个图形由一段路径的**两个子路径subpath**构成。evenodd填充规则用于处理子路径重叠区域的镂空保证箭头杆与箭头头的视觉连续、无异常重叠填充。结合.5单位的位移量如5.828、10.172、a.5.5可以看出路径严格贴合 16 网格的半像素对齐这是图标在小尺寸下保持清晰的关键设计。路径语义两段子路径分别绘制左上箭头从5.828 10.172出发向1.732方向延伸与右下箭头从10.172 5.828出发向14.268方向延伸其中4.096是箭头杆长度0.707是箭头转折处的直角控制量两个子路径以m命令分隔共同拼出向左上、右下对角展开的图形。这一规范化的 path 结构与类名bi bi-arrows-angle-expand完全一致可直接作为内联 HTML 使用见下文。文档页如何渲染这枚图标每个图标文档页由 docs/layouts/icons/single.html 渲染其核心逻辑第 36-38 行为{{- $localSvgPath : printf /icons/%s.svg .File.TranslationBaseName -}} {{- $svgPath : path.Join /assets/ $localSvgPath -}} {{- $svgHtml : readFile $localSvgPath | chomp | safeHTML -}}即根据文档文件名TranslationBaseName即arrows-angle-expand动态拼出/icons/arrows-angle-expand.svg用readFile读取原始 SVG 并以safeHTML注入页面。随后该模板会自动生成大尺寸预览以font-size: 10em的 demo 容器展示图标Examples 区域把同一个 SVG 分别嵌入 Heading、内联文本、链接、按钮btn-primary/btn-success/btn-outline-danger和输入框前缀等真实组件场景docs/layouts/icons/single.htmlDownload 面板提供Download SVG按钮指向/assets/icons/arrows-angle-expand.svgIcon font 代码片段i classbi bi-arrows-angle-expand/iCode point 面板从font/bootstrap-icons.json读取码点并展示 Unicode / CSS / JS / HTML 四种写法Copy HTML 面板直接给出可复制的内联 SVG。理解这个渲染链后你就能明白想新增或查看任意图标如arrows-angle-contract只需关注icons/*.svg与docs/content/icons/*.md两个目录的对应关系。四种集成方式与可运行示例仓库 README 明确给出了四种官方用法见 README.md以下针对本图标逐一展开。1. 内联 SVGCopy HTML将 icons/arrows-angle-expand.svg 的svg直接粘贴进 HTML借助currentColor天然继承文字颜色button typebutton classbtn btn-outline-secondary svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-arrows-angle-expand viewBox0 0 16 16 path fill-ruleevenodd dM5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707/ /svg Fullscreen /button内联方式优势是零依赖、可被 CSS 直接控制尺寸、颜色、旋转也是文档页 Copy HTML 面板提供的默认用法。2.img引用img src/assets/icons/arrows-angle-expand.svg altExpand width16 height16适合图标作为独立资源、不参与 DOM 样式继承的场景注意此时换色需直接修改 SVG 文件中的fill或使用 CSSfilter。3. SVG Sprite仓库根目录的 bootstrap-icons.svg 是全部图标合并成的 sprite 文件其中包含symbol idarrows-angle-expand ...由npm run icons-sprite依据 svg-sprite.json 配置生成。使用方式svg classbi width16 height16 fillcurrentColor use xlink:hrefbootstrap-icons.svg#arrows-angle-expand/use /svgSprite 适合页面中同时出现大量图标的场景一次请求、多处use复用。4. Web FontCSS class先引入字体样式文件再使用类名link relstylesheet hreffont/bootstrap-icons.css i classbi bi-arrows-angle-expand/i字体文件位于 font/fonts/含 woff2 / woff 两种格式样式表 font/bootstrap-icons.css 中对应规则为.bi-arrows-angle-expand::before { content: \f14a; }同时项目提供 font/bootstrap-icons.scssSass与 font/bootstrap-icons.min.css压缩版两种样式入口可按构建链路选用。字体码点UF14A 的四种写法在 font/bootstrap-icons.json 中本图标的码点映射为arrows-angle-expand: 6177061770的十六进制即0xF14A位于 Unicode 私有使用区Private Use Area用于规避与常规文字字符的冲突。官方文档页据此生成四种等价写法对应 docs/layouts/icons/single.html 的 Code point 面板场景写法示例UnicodeUF14A字体排印/文档标注CSS\f14acontent: \f14aJS\uF14A字符串中的转义表示HTML#xF14A;实体引用#xF14A;注意码点映射同时被 font/bootstrap-icons.ts 中的联合类型使用| arrows-angle-expand因此 TypeScript 项目中通过bootstrap-icons包引用字体时可以享受完整的图标名类型提示。相关图标与配套操作与arrows-angle-expand成对出现的是 arrows-angle-contract.svg对角收缩其元数据文档 docs/content/icons/arrows-angle-contract.md 同样带有arrow/resize标签。在设计全屏切换交互时推荐组合使用进入全屏显示expand退出全屏切换为contract。仓库内还包含大量同类箭头图标如arrows-fullscreen、arrows-expand、arrows-angle-contract等可通过 docs/content/icons/ 目录按分类浏览。安装与本地预览作为开发者你可以通过 npm 直接安装图标包README 说明见 README.mdnpm i bootstrap-icons # 或使用 Composer composer require twbs/bootstrap-icons若要在本地搭建文档站并实时预览这枚图标的渲染效果可克隆仓库后执行git clone https://github.com/twbs/icons/ cd icons npm i npm start随后访问http://localhost:4000package.json 中start实际是docs-serve的别名等价于hugo server --port 4000。图标相关的主要 npm scripts 包括npm run icons用 SVGO 优化icons/目录下的 SVG并重新生成字体与 sprite对应脚本链icons-main→icons-sprite/icons-font见 package.jsonnpm run pages为每个图标生成docs/content/icons/*.md模板页即本文骨架文件arrows-angle-expand.md的来源。小结arrows-angle-expand虽是一枚体量极小的图标但其背后串联起 Bootstrap Icons 仓库的完整工程链路16×16 网格上的 SVG 路径设计icons/arrows-angle-expand.svg、front matter 元数据docs/content/icons/arrows-angle-expand.md、Hugo 文档页动态渲染docs/layouts/icons/single.html、字体码点 UF14A 的四格式映射font/bootstrap-icons.json、font/bootstrap-icons.css以及 sprite 与 TypeScript 类型bootstrap-icons.svg、font/bootstrap-icons.ts。无论你选择内联 SVG、img、Sprite 还是 Web Font 方式集成理解这条链路都能让你在使用任意一枚 Bootstrap Icons 图标时做到知其然更知其所以然。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐SiYuan 阿拉伯语编辑指南从 RTL 设置到排版细节完整教程SiYuan 阿拉伯语编辑指南从 RTL 设置到排版细节完整教程 打开一篇阿拉伯语笔记屏幕上文字顺序颠倒、光标跳到左边、列表符号贴在行首而不是行尾——这就是前端Bootstrap Icons bag-x 图标深度解析SVG 结构、字体编码与多形态集成指南Bootstrap Icons bag x 图标深度解析SVG 结构、字体编码与多形态集成指南 本篇技术指南以 Bootstrap Icons 开源图标库仓前端Bootstrap Icons 的 Arrow Clockwise 图标全解析SVG 结构、字体码点与四种接入方式Bootstrap Icons 的 Arrow Clockwise 图标全解析SVG 结构、字体码点与四种接入方式 Arrow Clockwise 是 Boo前端上一篇终极指南使用nunif iw3-desktop将PC桌面实时转换为3D立体视频流下一篇推荐一款强大的RecyclerView适配器BRVAH创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

相关推荐

安全执行AI生成代码:Observal沙箱机制完整指南(Docker、WASM、Firecracker运行时)
安全执行AI生成代码:Observal沙箱机制完整指南(Docker、WASM、Firecracker运行时)

安全执行AI生成代码:Observal沙箱机制完整指南(Docker、WASM、Firecracker运行时) 【免费下载链接】Observal Observal is self-hosted registry for your coding agent extensions with a built in insight engine. Setup Observal, define … · 2026/9/27 7:06:12

【AI开发之Rust】第 18 课:SQLite 持久化与本地缓存 —— 给 store 填上真实现
【AI开发之Rust】第 18 课:SQLite 持久化与本地缓存 —— 给 store 填上真实现

18.1 这节课解决什么问题 第 17 课的 HistoryStore 还是内存假实现——App 一重启历史全丢。本课把它换成 SQLite 本地数据库,回答三件事: ① rusqlite:怎么连、怎么建表、怎么读写(参数化查询防注入) ② 表结构 &… · 2026/9/27 7:06:06

Claude Code多智能体编排深度解析:AgentTool、TeamCreate与Coordinator实现Agent Swarms
Claude Code多智能体编排深度解析:AgentTool、TeamCreate与Coordinator实现Agent Swarms

Claude Code多智能体编排深度解析:AgentTool、TeamCreate与Coordinator实现Agent Swarms 【免费下载链接】claude-code Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing r… · 2026/9/27 7:05:59

cryptography 中的 Poly1305:一次性密钥消息认证码(MAC)完整使用指南
cryptography 中的 Poly1305:一次性密钥消息认证码(MAC)完整使用指南

密码学 【免费下载链接】cryptography cryptography is a package designed to expose cryptographic primitives and recipes to Python developers. 项目地址: https://gitcode.com/gh_mirrors/cr/cryptography 点击查看 免费下载 本篇技术指南以 cryptography 项… · 2026/9/27 7:44:02

Ajenti 安全加固实战:基于 Fail2ban 的暴力破解防护配置指南
Ajenti 安全加固实战:基于 Fail2ban 的暴力破解防护配置指南

后端运维 【免费下载链接】ajenti Ajenti Core and stock plugins 项目地址: https://gitcode.com/gh_mirrors/aj/ajenti 点击查看 免费下载 Ajenti 是一个基于 Python 的轻量级 Web 管理平台,包含 Ajenti Core(平台本身,含 HTTP… · 2026/9/27 7:43:50

miniconda下载安装及使用教程
miniconda下载安装及使用教程

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 7:43:44

OfficeCLI 完整指南:AI 文档处理,3 条命令产出可交付的 PPT、Excel 与 Word
OfficeCLI 完整指南:AI 文档处理,3 条命令产出可交付的 PPT、Excel 与 Word

OfficeCLI 完整指南:AI 文档处理,3 条命令产出可交付的 PPT、Excel 与 Word 【免费下载链接】OfficeCLI OfficeCLI is the first and best Office suite purpose-built for AI agents to read, edit, and automate Word, Excel, and PowerPoint files. F… · 2026/9/27 7:43:44

重复消息、丢失通知怎么解决?幂等、Outbox 与 Inbox 实战
重复消息、丢失通知怎么解决?幂等、Outbox 与 Inbox 实战

重复消息、丢失通知怎么解决?幂等、Outbox 与 Inbox 实战 《企业级 Workflow 实战:从审批流到 AI Agent》第 06 篇 项目:AcmeFlow,星河设备客户维保服务开通中心 本篇交付:四个故障窗口的可运行实验、Outbox/Inbox 数据… · 2026/9/27 7:43:25

附录4-snipaste简单教程
附录4-snipaste简单教程

附录4-snipaste简单教程 1 下载 网站:Snipaste - 截图 贴图 下载免费版就行。 下好之后不用安装,直接解压,双击exe文件打开就能用。 2 改设置 改一个开机自启,这个软件几乎不占硬件资源,但是经常用,挂后… · 2026/9/27 7:43:25

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码