前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载Bootstrap Icons官方开源 SVG 图标库当前仓库版本 1.13.1为每个图标都维护了一份独立的 Hugo Markdown 文档用于在图标文档站点上生成独立页面。bell-slash-fill铃铛加斜杠、实心填充版即其中之一其页面元数据由 docs/content/icons/bell-slash-fill.md 定义真实 SVG 源码则存放在 icons/bell-slash-fill.svg。本文以该图标为核心从语义定位、SVG 路径结构、字体与样式映射到四种实际用法完整讲解如何在项目中引入并定制这个通知已静音语义图标。图标语义与文档元数据bell-slash-fill的文档 front matter 给出了三组关键元数据字段值说明titleBell slash fill图标显示名称fill后缀表示实心填充变体categoriesCommunications图标所属类别通讯/通信tagsnotification, silenced, clock语义标签通知、已静音、时钟铃铛常与提醒/时钟场景关联这三组字段并非装饰而是 docs/content/icons/ 目录下全部图标页面的通用结构。Hugo 站点构建时参见 package.json 中的docs-build: hugo --cleanDestinationDir --printUnusedTemplates会根据title生成每个图标的 permalink 页面并按categories、tags提供分类与标签检索入口。也就是说文档里的一句话实际驱动着整个图标站点的导航与 SEO 元数据生成。从语义上看铃铛bell代表通知与提醒斜杠slash则表达禁止/关闭组合在一起即通知已静音或勿扰模式是通知中心、聊天应用、系统设置中非常高频的状态图标。SVG 源码解析实心铃铛 斜杠的三段路径与常见的位图图标不同Bootstrap Icons 的每个图标都是独立的纯 SVG 文件可直接作为文本查看与嵌入。bell-slash-fill的完整源码如下icons/bell-slash-fill.svgsvg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-bell-slash-fill viewBox0 0 16 16 path dM5.164 14H15c-1.5-1-2-5.902-2-7q0-.396-.06-.776zm6.288-10.617A5 5 0 0 0 8.995 2.1a1 1 0 1 0-1.99 0A5 5 0 0 0 3 7c0 .898-.335 4.342-1.278 6.113zM10 15a2 2 0 1 1-4 0zm-9.375.625a.53.53 0 0 0 .75.75l14.75-14.75a.53.53 0 0 0-.75-.75z/ /svg可以从源码结构上把它拆成三个层次理解铃身与铃锤M5.164 14H15c-1.5-1...m6.288-10.617A5 5...第一段定义了从右上角到铃底的实心铃身轮廓其中嵌套的m子路径以A5 5圆弧画出铃舌clapper使实心填充变体-fill呈现出整体饱满的剪影效果。铃口圆环M10 15a2 2 0 1 1-4 0z底部一个小圆弧闭合路径表现铃铛开口处的形状这是铃铛类图标包括 bell.svg 系列通用的收尾结构。斜杠m-9.375.625a.53.53 0 0 0 .75.75l14.75-14.75...最后一段以l14.75-14.75从右下到左上绘制对角斜线配合两端的小圆角弧度a.53.53构成标准的禁用斜杠即静音语义的视觉核心。值得注意的工程细节整个图标不写死任何颜色fillcurrentColor意味着颜色完全继承父元素的colorCSS 属性因此同一份 SVG 可任意随文字颜色切换这也是 Bootstrap Icons 全库统一的着色约定。与兄弟图标 bell-slash描边版的对比仓库中同时存在非填充版本 icons/bell-slash.svgsvg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-bell-slash viewBox0 0 16 16 path dM5.164 14H15c-.299-.199-.557-.553-.78-1-.9-1.8-1.22-5.12-1.22-6q0-.396-.06-.776l-.938.938c.02.708.157 2.154.457 3.58.161.767.377 1.566.663 2.258H6.164zm5.581-9.91a4 4 0 0 0-1.948-1.01L8 2.917l-.797.161A4 4 0 0 0 4 7c0 .628-.134 2.197-.459 3.742q-.075.358-.166.718l-1.653 1.653q.03-.055.059-.113C2.679 11.2 3 7.88 3 7c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0c.942.19 1.788.645 2.457 1.284zM10 15a2 2 0 1 1-4 0zm-9.375.625a.53.53 0 0 0 .75.75l14.75-14.75a.53.53 0 0 0-.75-.75z/ /svg两者对比要点视觉密度-fill变体铃身为整块实心识别度高适合小尺寸展示和状态强调非 fill 版本铃身内部留有大量留白轮廓式适合需要更轻量、精致观感的场景。路径复杂度非 fill 版本用l-.938.938等折线把铃身拆成更细的轮廓段fill 版本则用q二次贝塞尔曲线q0-.396-.06-.776简化闭合渲染数据量更小。语义等价两者的斜杠路径末尾m-9.375.625...段几乎一致说明静音语义由斜杠独立承载填充与否不影响语义只影响风格。字体与样式层图标在工程中的四种形态bell-slash-fill不只是一个 SVG 文件它在仓库的字体与样式体系中同时以四种形态存在形态位置关键记录CSS 类选择器font/bootstrap-icons.css 第 1356 行.bi-bell-slash-fill::before { content: \f630; }SCSS 映射表font/bootstrap-icons.scss 第 1363 行bell-slash-fill: \f630TypeScript 联合类型font/bootstrap-icons.ts 第 228 行\| bell-slash-fillJSON 编码表font/bootstrap-icons.json 第 1329 行bell-slash-fill: 63024其中的\f630是图标在字体中的 Unicode 私有区码点十进制即 JSON 中的630240xF630。压缩版 font/bootstrap-icons.min.css 也包含同名规则与未压缩版行为一致。字体文件本体位于 font/fonts/woff2 与 woff 两种格式SCSS 映射表则允许在 Sass 项目中通过变量或函数按名字取码点而.ts类型定义让bell-slash-fill可以作为强类型字面量参与 TypeScript 图标名枚举。四种使用方式从内嵌 SVG 到字体图标根据 README.md 的安装与使用说明先安装依赖npm i bootstrap-icons或通过 Composercomposer.json 亦声明了该包composer require twbs/bootstrap-icons安装后可按以下四种方式使用bell-slash-fill。方式一内嵌 SVG推荐可控性最高直接把 icons/bell-slash-fill.svg 的内容粘贴进 HTML并借助currentColor继承文字颜色svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-bell-slash-fill viewBox0 0 16 16 aria-label通知已静音 path dM5.164 14H15c-1.5-1-2-5.902-2-7q0-.396-.06-.776zm6.288-10.617A5 5 0 0 0 8.995 2.1a1 1 0 1 0-1.99 0A5 5 0 0 0 3 7c0 .898-.335 4.342-1.278 6.113zM10 15a2 2 0 1 1-4 0zm-9.375.625a.53.53 0 0 0 .75.75l14.75-14.75a.53.53 0 0 0-.75-.75z/ /svg通过 CSS 可任意缩放、改色、加动画如静音时旋转斜杠是无框架场景下的首选。方式二img引用img src./node_modules/bootstrap-icons/icons/bell-slash-fill.svg alt通知已静音 width16 height16注意此时currentColor不再生效图标颜色由 SVG 自身决定本图标未硬编码 fill将默认渲染为黑色需要变色时应改用 CSSfilter或直接切换方式一。方式三CSS 字体图标引入字体样式后使用类名即可link relstylesheet href./node_modules/bootstrap-icons/font/bootstrap-icons.css i classbi bi-bell-slash-fill/i其原理即前文提到的.bi-bell-slash-fill::before { content: \f630 }伪元素规则——类名中的bi-前缀负责加载字体族bell-slash-fill段映射到码点\f630。这是体积最小、换色最方便直接改color的用法适合在按钮、菜单中高频使用。方式四SVG Sprite仓库根目录的 bootstrap-icons.svg 是打包好的全量 SVG sprite其中已包含bell-slash-fill符号可一次性加载后按符号引用svg classbi aria-hiddentrue use hrefbootstrap-icons.svg#bell-slash-fill/use /svg该 sprite 由构建脚本生成package.json中的icons-sprite: svg-sprite --config svg-sprite.json --loginfo icons/*.svg配置见 svg-sprite.json适合图标数量多、希望复用单一 HTTP 请求的页面。实战示例通知中心静音状态切换综合以上能力可以用一个简单示例演示bell-slash-fill与bell-fill的切换用字体类名方式button idmuteBtn classbtn aria-pressedfalse i idbellIcon classbi bi-bell-fill/i 通知 /button script const btn document.getElementById(muteBtn); const icon document.getElementById(bellIcon); btn.addEventListener(click, () { const muted btn.getAttribute(aria-pressed) true; btn.setAttribute(aria-pressed, String(!muted)); // 静音态切换为 bell-slash-fill解除静音回到 bell-fill icon.className muted ? bi bi-bell-fill : bi bi-bell-slash-fill; }); /script这个例子展示了 Bootstrap Icons 类名体系的典型用法同一元素上通过切换类名即可在两个图标之间无感过渡无需重新加载资源这也是-fill与普通变体成对发布的核心价值——它们共用同一套字体、同一套码点段\f630与\f631相邻切换成本几乎为零。相关文件速查围绕bell-slash-fill可在仓库中继续深入查看图标文档元数据docs/content/icons/bell-slash-fill.md本图标页面与同目录下成对出现的 docs/content/icons/bell-slash.mdSVG 源文件icons/bell-slash-fill.svg 与 icons/bell-slash.svg字体与样式映射font/bootstrap-icons.css、font/bootstrap-icons.scss、font/bootstrap-icons.ts、font/bootstrap-icons.json全量 spritebootstrap-icons.svg安装与使用总览README.mdnpm i bootstrap-icons/composer require twbs/bootstrap-icons综上bell-slash-fill虽只是一枚 16×16 的矢量图标但它在仓库中贯穿了文档元数据 → 独立 SVG → 字体码点 → CSS/SCSS/TS/JSON 四重映射 → sprite 符号的完整生产链路。理解这条链路就能触类旁通地掌握 Bootstrap Icons 全部两千余枚图标的使用与定制方法。赞分享前端【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址https://gitcode.com/gh_mirrors/ic/icons点击查看免费下载相关推荐Bootstrap Icons 的 Bell Slash 图标从“静音通知”语义到 Font 与 Sprite 全链路实现Bootstrap Icons 的 Bell Slash 图标从“静音通知”语义到 Font 与 Sprite 全链路实现 导读 bell slash 斜线前端Checkmate 开源自托管监控平台安装部署、核心功能与监控生命周期深度解析Checkmate 开源自托管监控平台安装部署、核心功能与监控生命周期深度解析 Checkmate 是一款开源、可完全自托管的服务器可用性与基础设施监控工具前端Ruby 自修复 Quine 实战解剖TRICK 2022「最佳鱼缸」的模 89 线性代数纠错与水生动画续播实现Ruby 自修复 Quine 实战解剖TRICK 2022「最佳鱼缸」的模 89 线性代数纠错与水生动画续播实现 导读 本文以 Ruby 官方仓库 sampl前端上一篇免费开源动作捕捉终极指南5分钟从零到专业级应用下一篇开源工具QtScrcpy如何用桌面级控制重构Android设备体验创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考