前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载file-earmark-bar-graph文件-角标-柱状图是 Bootstrap Icons 开源 SVG 图标库中「Files and folders文件与文件夹」分类下的一个代表性图标用于表达“包含数据图表的文档”这一语义。本文以仓库中的 文档页、SVG 源文件 及其 Fill 变体为据深入讲解该图标的视觉构成、双变体差异、字体码点以及嵌入 HTML、SVG Sprite、图标字体等全套使用方式帮助你把它正确接入 Bootstrap 项目。图标基本信息与文档结构在仓库中每个图标对应docs/content/icons/下的一个 Markdown 文档file-earmark-bar-graph的文档内容如下--- title: File earmark bar graph categories: - Files and folders tags: - doc - document - data - chart ---这份 Front Matter 定义了三个关键元信息titleFile earmark bar graph即该图标在文档站点上的展示名称categoriesFiles and folders将该图标归入「文件与文件夹」分类tagsdoc、document、data、chart分别对应「文档」「数据」「图表」等检索关键词便于按语义筛选图标。这些元数据在站点生成时会被真正消费文档列表模板 docs/layouts/partials/icons.html 通过data-tags、data-categories属性把分类与标签输出到搜索过滤器而详情页模板 docs/layouts/icons/single.html 则在标题下方直接渲染 Tags 与 Category 列表。也就是说当你需要表达“一份包含统计柱状图的文档文件”时按file-earmark-bar-graph这个语义关键词即可检索到本图标。图标设计解读折角文档 三根数据柱file-earmark-bar-graph的矢量图形定义位于 icons/file-earmark-bar-graph.svg完整内容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-file-earmark-bar-graph viewBox0 0 16 16 path dM10 13.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5z/ path dM14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z/ /svg可以从 SVG 源码层面拆解它的视觉构成标准画布width16 height16、viewBox0 0 16 16与 Bootstrap Icons 全库统一的 16×16 网格一致保证与其他图标并排时尺寸协调着色方式fillcurrentColor意味着图标颜色完全继承父元素的color无需额外指定即可跟随主题切换第一条 path数据柱绘制三根高度递减的柱状条——左侧柱高 2 个单位v-2中间柱高 4 个单位v-4右侧柱高 6 个单位v-6自上而下形成典型的“数据趋势”视觉语言第二条 path文档本体采用“折角文档earmark”轮廓——左下角圆角矩形 右上角折角。路径从M14 14V4.5L9.5 0开始表示折角位于文档右上角这正是earmark系列图标共有的特征。从源码结构可以推断earmark右上折角用于标识“这是一个带附加元数据的文件”而内部的柱状图形则表达“该文件包含统计图表/数据”二者结合即构成「数据图表文档」的完整语义。双变体Outline 与 Fill与 Bootstrap Icons 中大多数图标一样file-earmark-bar-graph提供轮廓Outline与实心Fill两个变体后者见 icons/file-earmark-bar-graph-fill.svgsvg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-file-earmark-bar-graph-fill viewBox0 0 16 16 path dM9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1m.5 10v-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5m-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5z/ /svg两个变体的对比要点Fill 变体将文档轮廓合并为实心色块H4a2 2 0 0 0-2 2v12...右上折角处多了「撕角」造型M9.5 3.5v-2l3 3h-2折角区域留白三根数据柱在两种变体中高度与位置完全一致右侧柱v-6、中间柱v-4、左侧柱v-2保证切换变体时图形骨架不漂移命名上统一遵循名称与名称-fill的仓库约定同组的file-earmark-*系列arrow、binary、break、check 等均采用该规则。选择建议页面整体使用实心图标如导航高亮、主按钮时优先-fill变体需要轻量线框质感如辅助说明、占位符时使用 Outline 变体。字体码点从 JSON 到 CSS/JS/HTML除直接使用 SVG 外Bootstrap Icons 还以图标字体形式发布。仓库通过 font/bootstrap-icons.json 记录每个图标的 Unicode 码点file-earmark-bar-graph-fill: 62297, file-earmark-bar-graph: 62298数值 62297 / 62298 转换为十六进制即为UF359-fill与UF35A常规与字体样式表 font/bootstrap-icons.css 中的映射完全一致.bi-file-earmark-bar-graph-fill::before { content: \f359; } .bi-file-earmark-bar-graph::before { content: \f35a; }据此你可以用四种等价方式引用码点场景写法结果CSScontent: \f35aUF35AJavaScript\uF35AUF35AHTML 实体#xF35A;UF35AUnicode 字面量UF35AUF35A注意码点落在 Unicode 私有使用区Private Use AreaPUAUF000 起仅当页面加载了 Bootstrap Icons 字体文件font/bootstrap-icons.woff2 与 font/fonts/bootstrap-icons.woff时才能正确渲染单独复制码点离开字体环境不会显示图形。四种使用方式实战仓库 README 提供了npm i bootstrap-iconsnpm或composer require twbs/bootstrap-iconsComposer两种安装途径。安装后可按需选择接入方式。1. 内联 SVG推荐可裁剪可定制直接从 icons/file-earmark-bar-graph.svg 复制内容嵌入 HTML。由于fillcurrentColor配合 CSS 即可控制颜色与尺寸svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-file-earmark-bar-graph viewBox0 0 16 16 path dM10 13.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5z/ path dM14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z/ /svg.bi-file-earmark-bar-graph { color: #6f42c1; width: 2em; height: 2em; }2.img引用img srcicons/file-earmark-bar-graph.svg alt数据图表文档 width32 height32此方式下currentColor不生效颜色由 SVG 文件自身决定本图标源文件未内置具体颜色将默认渲染为黑色如需定制可先编辑副本再引用。3. SVG Spriteuse引用仓库根目录的 bootstrap-icons.svg 是打包好的 SVG Sprite每个图标以symbol idfile-earmark-bar-graph形式存在。使用时在页面引入 Sprite 并通过use指向对应符号svg classbi width16 height16 fillcurrentColor use xlink:hrefbootstrap-icons.svg#file-earmark-bar-graph/ /svg文档列表模板 docs/layouts/partials/icons.html 正是采用这一模式渲染图标网格use xlink:href../bootstrap-icons.svg#{{ $filename }}/。Sprite 方式避免了重复内联整段 SVG适合页面中多次使用同一图标。4. 图标字体i标签先引入字体样式link relstylesheet hreffont/bootstrap-icons.css然后按“bi基础类 bi-图标名具体类”的方式使用i classbi bi-file-earmark-bar-graph/i i classbi bi-file-earmark-bar-graph-fill/i这是官方文档站点本身的使用方式——docs/layouts/partials/icons.html 首页网格渲染classbi bi-{{ $filename }}而 docs/layouts/icons/single.html 详情页给出的字体片段同样为i classbi bi-file-earmark-bar-graph/i。字体方式可以用font-size直接缩放配合color着色最适合按钮、列表、导航等高频场景。官方文档页如何展示该图标阅读 docs/layouts/icons/single.html 可以看到官方详情页的完整信息结构这也是每个图标独立文档页的标准模板从/icons/名称.svg读取源文件并渲染大图预览与多组示例标题、正文行内、链接、按钮、输入框组Download区块提供源 SVG 下载Icon font区块给出i classbi bi-.../i片段Code point区块从 font/bootstrap-icons.json 读取数值并换算输出 UnicodeUF35A、CSS\f35a、JS\uF35A、HTML#xF35A;四种写法对应本图标码点 62298Copy HTML区块直接高亮展示可复制的内联 SVG。简而言之一个图标 Front Matter 元数据docs/content/icons/file-earmark-bar-graph.md 源 SVGicons/file-earmark-bar-graph.svg 字体码点font/bootstrap-icons.json三者的组合本图标恰好是这一三要素结构的完整样例。小结语义定位bi-file-earmark-bar-graph归入 Files and folders 分类标签doc / document / data / chart用于「数据图表文档」场景如报表入口、统计文件列表项、分析工具占位图图形内核右上折角文档 三根高度递减数据柱v-6 / v-4 / v-2fillcurrentColor保证随主题变色双变体常规版与-fill版图形骨架一致实心/线框按页面氛围取舍码点UF35A62298CSS\f35a、JS\uF35A、HTML#xF35A;四写等价但必须配合字体文件渲染接入路径内联 SVG、img、SVG Sprite、图标字体四种方式均可从本仓库直接取得素材无需额外处理即可投入项目。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐uni-app x 统计模块 uni-stat 版本演进与技术实现深度解读uni app x 统计模块 uni stat 版本演进与技术实现深度解读 uni统计 for uni app x模块 id uni stat 是面向 u前端N_m3u8DL-RE一条命令搞定流媒体下载N_m3u8DL RE一条命令搞定流媒体下载 你想把一场直播存下来或者把一门在线课程存到本地但拿到的链接点开却是一个 .m3u8 或 .mpd 文件——它前端Bootstrap Icons 的 caret-down-square 图标SVG 结构、字体码点与完整使用指南Bootstrap Icons 的 caret down square 图标SVG 结构、字体码点与完整使用指南 caret down square向下插入前端上一篇svg2pdf.js性能优化提升SVG转PDF转换速度的7个实用技巧下一篇Next.js Playground并行路由实战构建复杂导航系统的完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考