前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载本篇技术指南围绕 Bootstrap Icons 官方开源 SVG 图标库中的card-text图标展开结合仓库中的 SVG 源文件、图标页面模板与字体配置文件讲解该图标的图形结构、在 HTML 中的多种引用方式内联 SVG、i字体、Unicode 码点以及文档站点的生成机制。读完本文你将能够直接在任意 Bootstrap 项目中嵌入 card-text 图标并能定位它在仓库各产物icons/、font/、bootstrap-icons.svg中的对应实现。card-text 是什么card-text是 Bootstrap Icons 图标库中属于Files and folders文件与文件夹分类的一个图标其语义是一张卡片上带有文本行的图形常用作笔记note、卡片card、记事卡notecard、信函letter等场景的视觉标记。该语义信息记录在图标的元数据文件 docs/content/icons/card-text.md 中其 front matter 内容如下--- title: Card text categories: - Files and folders tags: - note - card - notecard - letter ---在文档站点中title会渲染为图标详情页的 H1 标题categories与tags则被 docs/layouts/icons/single.html 渲染为页面上的分类与标签列表方便用户按语义检索。SVG 源文件解析card-text的核心产物是位于 icons/card-text.svg 的独立 SVG 文件完整内容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-card-text viewBox0 0 16 16 path dM14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2z/ path dM3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8m0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5/ /svg从源码结构可以拆解出该图标的绘制逻辑第一个 path 是卡片外壳绘制一个圆角矩形卡片轮廓。注意它由两段子路径组成第一段以 0.5 的线宽近似描边路径第二段以绝对坐标0,2到15,14精确重绘外框两段叠加后形成一个可缩放的 1.5 圆角卡片边框第二个 path 是文本行包含三段子路径分别在y5.5、y8、y10.5处绘制三条水平文本行其中第三条y10.5的行长只延伸到x9h6模拟真实卡片上标题长、正文短的排版效果这正是card-text区别于card-list卡片列表等同类图标的细节。设计层面该图标遵循仓库 README.md 中描述的通用规范基于16×16 网格绘制使用fill填充而非stroke描边并通过fillcurrentColor继承父元素的文本颜色因此可借助 CSScolor属性一键换色。classbi bi-card-text则是图标字体的关联类名。在 HTML 中引用 card-text 的四种方式根据 README.md 中 Usage 一节说明Bootstrap Icons 支持以下几种引入方式均适用于card-text。1. 内联 SVGCopy HTML将 icons/card-text.svg 的内容直接粘贴到 HTML 中图标会随上下文文本颜色自动着色且可以配合width、height任意缩放svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-card-text viewBox0 0 16 16 path dM14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2z/ path dM3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8m0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5/ /svg这是最灵活的方式适合需要精确控制尺寸与颜色、且图标数量不多的场景。2. 通过img引用将 icons/card-text.svg 作为静态资源放入项目用img标签引用img srcicons/card-text.svg altCard text width16 height16注意通过img方式无法使用currentColor继承颜色如需换色只能修改 SVG 文件本身的fill值。3. 使用 SVG Sprite雪碧图仓库根目录的 bootstrap-icons.svg 将所有图标打包为一个symbol集合。card-text以symbol idcard-text的形式存在于该文件中可通过use引用svg classbi width16 height16 fillcurrentColor aria-hiddentrue use xlink:hrefbootstrap-icons.svg#card-text/use /svg这种方式只需加载一次 SVG 文件即可复用任意图标适合图标数量较多的站点。4. 通过字体Icon fontBootstrap Icons 同时提供字体产物位于 font/ 目录包含 font/bootstrap-icons.css、font/bootstrap-icons.scss 与 woff/woff2 字体文件。引入 CSS 后即可用类名输出图标i classbi bi-card-text/i在 font/bootstrap-icons.scss 中可以找到该类名与字符码的映射card-text: \f228,即.bi-card-text渲染的是码点\f228对应的字形。使用字体方式的好处是图标作为文本参与排版天然对齐行高与基线便于与按钮、输入框等组件混排。Unicode 码点与跨语言引用card-text的码点记录在 font/bootstrap-icons.json 中card-text: 6199261992是十进制换算为十六进制即为0xF228对应 SCSS 中的\f228。文档详情页模板 docs/layouts/icons/single.html 会从该 JSON 读取码点并自动生成四种语言的引用写法引用方式写法UnicodeUF228CSS\f228JavaScript\uF228HTML 实体#xF228;因此在 CSS 或 JS 场景中也可以直接使用码点而不必引入整套字体 CSS.card-text-icon::before { content: \f228; /* 等价于 i classbi bi-card-text/i */ font-family: bootstrap-icons; }图标页面如何渲染从 Markdown 到 HTMLcard-text的文档页面并非手写 HTML而是由 Hugo 模板自动生成的。该过程可复现如下docs/content/icons/card-text.md 提供页面元数据标题、分类、标签docs/layouts/icons/single.html 作为详情页模板其关键逻辑包括第 36-38 行根据TranslationBaseName即card-text拼接出/icons/card-text.svg路径并读取 SVG 内容第 42-44 行以 10em 字号大字预览图标第 46-106 行渲染内联、标题、按钮、按钮组、输入框等真实场景示例第 109-111 行提供 Download SVG 下载按钮第 113-119 行自动生成i classbi bi-card-text/i字体片段第 121-139 行从 font/bootstrap-icons.json 读取码点并输出四种引用写法第 142-147 行展示可复制的完整 SVG 源码。所以开发者只需要维护icons/*.svg与docs/content/icons/*.md站点页面即可自动更新这一机制也解释了为什么每个图标都有独立且一致的文档页。安装与本地预览要获取card-text图标并在本地浏览其文档页按 README.md 的说明操作即可。通过 npm 安装仓库发布包中包含处理好的icons/*.svg与font/产物npm i bootstrap-icons亦可通过 ComposerPackagist安装composer require twbs/bootstrap-icons若要在本地起文档站点进行开发预览git clone https://github.com/twbs/icons/ cd icons npm i npm start然后打开http://localhost:4000。其中npm start实际执行hugo server --port 4000 --disableFastRender见 package.json。整个仓库当前版本为 1.13.1构建依赖 SVGO 做 SVG 优化、svg-sprite生成雪碧图、fantasticon生成字体详见 package.json 的 scripts 与 devDependencies。小结card-text是 Bootstrap Icons Files and folders 分类下的笔记/卡片语义图标元数据定义于 docs/content/icons/card-text.md独立 SVG 位于 icons/card-text.svg按 16×16 网格、fillcurrentColor规范绘制含卡片边框与三条文本行两条 path四种引用方式分别对应内联 SVG、img、bootstrap-icons.svg雪碧图中的symbol idcard-text、以及字体类bi bi-card-text字体码点为UF228JSON 中十进制 61992支持 CSS、JS、HTML 实体四种写法文档详情页由 docs/layouts/icons/single.html 模板自动生成与源码、字体、码点数据联动。掌握上述内容后你可以在任何 Bootstrap 项目中快速嵌入 card-text 图标并理解它在仓库各产物中的底层实现路径。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons Balloon 图标详解SVG 源码、字体 Code Point 与生日场景实战Bootstrap Icons Balloon 图标详解SVG 源码、字体 Code Point 与生日场景实战 Bootstrap Icons 是 Boot前端Bootstrap Icons Badge VR 图标详解SVG 源文件、字体码点与使用方法Bootstrap Icons Badge VR 图标详解SVG 源文件、字体码点与使用方法 Badge VR badge vr 是 Bootstrap前端Bootstrap Icons archive-fill 图标全解SVG 源码、字体码点与三种嵌入实战Bootstrap Icons archive fill 图标全解SVG 源码、字体码点与三种嵌入实战 导读 archive fill 归档箱·填充版是前端上一篇GetQzonehistory5分钟快速备份QQ空间所有历史说说的终极指南下一篇ComfyUI从零开始掌握AI创作的可视化节点引擎创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考