Bootstrap Icons 图标字体方案完整实战告别散 SVG 的多次请求一次搞定 2000 免费开源图标【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/iconsBootstrap Icons 是 Bootstrap 官方维护的免费开源图标库收录了 2000 个风格统一的 SVG 图标还能一键打包成 woff2/woff 字体文件让整套图标一次请求全部加载。用它配页面图标加载更快、颜色更好管个人项目和小团队协作都够用。话说回来你第一次给网页配图标时是不是也干过这种事跑去图标网站挑图一个个下载 SVG 文件然后……页面还没上线就被同事吐槽「30 个图标 30 次请求这页面能不慢吗」更崩溃的是产品临时要把整套图标换个颜色你只能挨个打开文件改fill。别问我是怎么知道的。如果你也在这个坑里这篇指南就是为你写的。下面我用「散装方案 vs 图标字体」的对比带你一步步把 Bootstrap Icons 用明白。一、散装 SVG 与图标字体的三回合对比先看一组扎心的对照对比项散装 SVG一个图标一个文件图标字体Bootstrap Icons 方案请求次数10 个图标 10 次请求1 次请求加载全部图标改颜色逐个打开文件改fill一行 CSScolor搞定缓存每个文件单独缓存一个字体文件长期缓存核心区别一句话散装 SVG 是「按图加载」图标字体是「打包加载」。后者把所有图标压缩进 woff2/woff 字体浏览器只下载一次就够用。这也是为什么前端圈流行「图标字体优先」不是 SVG 不好而是几百个图标各自发请求成本实在太高。二、Bootstrap Icons 是什么官方血统的免费图标库Bootstrap Icons 由 Bootstrap 团队官方出品MIT 协议商用和个人使用都不收费。目前 npm 上的版本已经迭代到 1.13.x图标数量超过 2000 个箭头、状态、多媒体、社交品牌、天气、购物这些常见分类基本全覆盖且全部统一在 16×16 的网格上整套放一起不会出现「画风突变」的尴尬。划重点所有图标原生使用fillcurrentColor天然适配「跟着文字颜色走」的设计习惯官方文档源码放在docs/目录用 Hugo 构建本地跑npm start就能在http://localhost:4000预览整个图标库。三、安装三种姿势按你的项目场景挑装 Bootstrap Icons 没有唯一答案取决于你在什么技术栈里场景 AVue / React / 普通 npm 前端项目npm i bootstrap-icons装完之后font/目录里就躺着bootstrap-icons.css、压缩版.min.css、.scss源码以及fonts/下的 woff2 和 woff 字体文件直接引入即可。场景 BPHP / Composer 项目composer require twbs/bootstrap-icons如果你的后端是 Composer 体系这一行就能把图标资源拉进项目省去手动搬文件的功夫。场景 C纯静态页面不想要任何构建工具直接克隆仓库把font/和icons/两个目录复制到站点里用效果完全一样。四、真正上手四种用法每个场景各取所需安装只是热身接下来这四种用法才是重头戏。它们没有绝对的优劣只看你的使用场景更在意什么。① CSS 类名调用上手最快、改样式最省事link relstylesheet hreffont/bootstrap-icons.css i classbi bi-alarm/i i classbi bi-arrow-right stylecolor: #0d6efd;/ifont/bootstrap-icons.css会把每个图标注册成一个.bi-xxx类加类名即出图标颜色、大小全交给 CSS 控制。这也是日常开发里最推荐的方式。② SVG 精灵图引用图标多、想复用又不想背类名svg classbi width32 height32 fillcurrentColor use xlink:hrefbootstrap-icons.svg#alarm/ /svg项目根目录的bootstrap-icons.svg就是精灵图里面每个符号按图标名命名use一引就出来非常适合图标种类繁多、反复出现的后台页面。③ 内联 SVG 嵌入要给某个图标单独加动画或微调时svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-alarm viewBox0 0 16 16 path dM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9z/ path dM6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1zm1.038 3.018a6 6 0 0 1 .924 0 6 6 0 1 1-.924 0M0 3.5c0 .753.333 1.429.86 1.887A8.04 8.04 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5M13.5 1c-.753 0-1.429.333-1.887.86a8.04 8.04 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1/ /svg这段就是从icons/alarm.svg原样拷贝的任何编辑器里粘贴即用自由度最大。④img标签引用纯展示、不需要任何交互img srcicons/alarm.svg alt闹钟图标 width32 height32一句话总结日常选①图标多选②要精细控制选③只想省事选④。五、进阶玩法把 2000 SVG 变成你自己的字体到这里你可能好奇字体是怎么从一堆 SVG 里「长」出来的。答案藏在package.json的脚本里总入口是npm run icons它内部串起了三条流水线icons-main跑node build/build-svgs.mjs用 SVGO 压缩icons/下每个 SVG并统一属性icons-sprite按svg-sprite.json配置生成bootstrap-icons.svg精灵图icons-font用 fantasticon 生成字体与font/bootstrap-icons.css再交给 clean-css 压出.min.css。你还可以看看根目录的svgo.config.mjs里面有几个有意思的细节它会删掉 SVG 里的fill和clip-rule属性再统一写回xmlns、width16、height16、fillcurrentColor、classbi bi-xxx、viewBox0 0 16 16。换句话说不管你从哪弄来一个图标丢进icons/跑完脚本它都会变得和其他图标一模一样地规范。所以自定义扩展也很简单把设计好的 16×16 SVG 丢进icons/目录执行npm run icons新图标就会自动进入精灵图、字体和 CSS对应类名也随之生成。快速问答我不想用字体只想用优化好的单个 SVG可以吗可以。跑完npm run icons-main后icons/里的文件就是经过压缩和属性统一的成品直接拿去用就行。六、新手最容易踩的 3 个坑坑 1图标显示成方框八成是字体文件没加载到或者类名拼错了。先确认 CSS 文件路径对不对再看类名是不是bi-前缀加图标名bi-alarm写成bi-alarm2这种低级错误也真有人犯。坑 2颜色怎么改都不变如果图标本身用的是fillcurrentColor那颜色只能通过父级文字颜色控制。正确姿势是控制color而不是给i单独加背景或边框/* 这样是生效的 */ .text-primary { color: #0d6efd; }坑 3图标大小忽大忽小字体图标请用font-size控制尺寸别去调width/height否则容易和其他图标对不齐.bi-custom { font-size: 2rem; }收尾从今天起把图标方案升级一次回到开头那个被同事吐槽的场景——换成 Bootstrap Icons 之后页面请求数从「图标数量」降到「1」改色从「逐个改文件」变成「一个变量」这套体验值得你花十分钟验证一下。建议的行动路线很简单先按 CSS 类名的方式把页面撑起来遇到需要精细控制的图标再切内联或精灵图最后有余力再去研究字体构建。想动手玩一玩构建流程的话可以克隆仓库本地跑一遍git clone https://gitcode.com/gh_mirrors/ic/icons cd icons npm install npm run icons跑完你会发现那些看似复杂的字体生成其实只是一条顺手的流水线。先从第一个.bi-类名开始吧。【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/icons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Bootstrap Icons 图标字体方案完整实战：告别散 SVG 的多次请求，一次搞定 2000+ 免费开源图标
Bootstrap Icons 图标字体方案完整实战告别散 SVG 的多次请求一次搞定 2000 免费开源图标【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/iconsBootstrap Icons 是 Bootstrap 官方维护的免费开源图标库收录了 2000 个风格统一的 SVG 图标还能一键打包成 woff2/woff 字体文件让整套图标一次请求全部加载。用它配页面图标加载更快、颜色更好管个人项目和小团队协作都够用。话说回来你第一次给网页配图标时是不是也干过这种事跑去图标网站挑图一个个下载 SVG 文件然后……页面还没上线就被同事吐槽「30 个图标 30 次请求这页面能不慢吗」更崩溃的是产品临时要把整套图标换个颜色你只能挨个打开文件改fill。别问我是怎么知道的。如果你也在这个坑里这篇指南就是为你写的。下面我用「散装方案 vs 图标字体」的对比带你一步步把 Bootstrap Icons 用明白。一、散装 SVG 与图标字体的三回合对比先看一组扎心的对照对比项散装 SVG一个图标一个文件图标字体Bootstrap Icons 方案请求次数10 个图标 10 次请求1 次请求加载全部图标改颜色逐个打开文件改fill一行 CSScolor搞定缓存每个文件单独缓存一个字体文件长期缓存核心区别一句话散装 SVG 是「按图加载」图标字体是「打包加载」。后者把所有图标压缩进 woff2/woff 字体浏览器只下载一次就够用。这也是为什么前端圈流行「图标字体优先」不是 SVG 不好而是几百个图标各自发请求成本实在太高。二、Bootstrap Icons 是什么官方血统的免费图标库Bootstrap Icons 由 Bootstrap 团队官方出品MIT 协议商用和个人使用都不收费。目前 npm 上的版本已经迭代到 1.13.x图标数量超过 2000 个箭头、状态、多媒体、社交品牌、天气、购物这些常见分类基本全覆盖且全部统一在 16×16 的网格上整套放一起不会出现「画风突变」的尴尬。划重点所有图标原生使用fillcurrentColor天然适配「跟着文字颜色走」的设计习惯官方文档源码放在docs/目录用 Hugo 构建本地跑npm start就能在http://localhost:4000预览整个图标库。三、安装三种姿势按你的项目场景挑装 Bootstrap Icons 没有唯一答案取决于你在什么技术栈里场景 AVue / React / 普通 npm 前端项目npm i bootstrap-icons装完之后font/目录里就躺着bootstrap-icons.css、压缩版.min.css、.scss源码以及fonts/下的 woff2 和 woff 字体文件直接引入即可。场景 BPHP / Composer 项目composer require twbs/bootstrap-icons如果你的后端是 Composer 体系这一行就能把图标资源拉进项目省去手动搬文件的功夫。场景 C纯静态页面不想要任何构建工具直接克隆仓库把font/和icons/两个目录复制到站点里用效果完全一样。四、真正上手四种用法每个场景各取所需安装只是热身接下来这四种用法才是重头戏。它们没有绝对的优劣只看你的使用场景更在意什么。① CSS 类名调用上手最快、改样式最省事link relstylesheet hreffont/bootstrap-icons.css i classbi bi-alarm/i i classbi bi-arrow-right stylecolor: #0d6efd;/ifont/bootstrap-icons.css会把每个图标注册成一个.bi-xxx类加类名即出图标颜色、大小全交给 CSS 控制。这也是日常开发里最推荐的方式。② SVG 精灵图引用图标多、想复用又不想背类名svg classbi width32 height32 fillcurrentColor use xlink:hrefbootstrap-icons.svg#alarm/ /svg项目根目录的bootstrap-icons.svg就是精灵图里面每个符号按图标名命名use一引就出来非常适合图标种类繁多、反复出现的后台页面。③ 内联 SVG 嵌入要给某个图标单独加动画或微调时svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-alarm viewBox0 0 16 16 path dM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9z/ path dM6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1zm1.038 3.018a6 6 0 0 1 .924 0 6 6 0 1 1-.924 0M0 3.5c0 .753.333 1.429.86 1.887A8.04 8.04 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5M13.5 1c-.753 0-1.429.333-1.887.86a8.04 8.04 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1/ /svg这段就是从icons/alarm.svg原样拷贝的任何编辑器里粘贴即用自由度最大。④img标签引用纯展示、不需要任何交互img srcicons/alarm.svg alt闹钟图标 width32 height32一句话总结日常选①图标多选②要精细控制选③只想省事选④。五、进阶玩法把 2000 SVG 变成你自己的字体到这里你可能好奇字体是怎么从一堆 SVG 里「长」出来的。答案藏在package.json的脚本里总入口是npm run icons它内部串起了三条流水线icons-main跑node build/build-svgs.mjs用 SVGO 压缩icons/下每个 SVG并统一属性icons-sprite按svg-sprite.json配置生成bootstrap-icons.svg精灵图icons-font用 fantasticon 生成字体与font/bootstrap-icons.css再交给 clean-css 压出.min.css。你还可以看看根目录的svgo.config.mjs里面有几个有意思的细节它会删掉 SVG 里的fill和clip-rule属性再统一写回xmlns、width16、height16、fillcurrentColor、classbi bi-xxx、viewBox0 0 16 16。换句话说不管你从哪弄来一个图标丢进icons/跑完脚本它都会变得和其他图标一模一样地规范。所以自定义扩展也很简单把设计好的 16×16 SVG 丢进icons/目录执行npm run icons新图标就会自动进入精灵图、字体和 CSS对应类名也随之生成。快速问答我不想用字体只想用优化好的单个 SVG可以吗可以。跑完npm run icons-main后icons/里的文件就是经过压缩和属性统一的成品直接拿去用就行。六、新手最容易踩的 3 个坑坑 1图标显示成方框八成是字体文件没加载到或者类名拼错了。先确认 CSS 文件路径对不对再看类名是不是bi-前缀加图标名bi-alarm写成bi-alarm2这种低级错误也真有人犯。坑 2颜色怎么改都不变如果图标本身用的是fillcurrentColor那颜色只能通过父级文字颜色控制。正确姿势是控制color而不是给i单独加背景或边框/* 这样是生效的 */ .text-primary { color: #0d6efd; }坑 3图标大小忽大忽小字体图标请用font-size控制尺寸别去调width/height否则容易和其他图标对不齐.bi-custom { font-size: 2rem; }收尾从今天起把图标方案升级一次回到开头那个被同事吐槽的场景——换成 Bootstrap Icons 之后页面请求数从「图标数量」降到「1」改色从「逐个改文件」变成「一个变量」这套体验值得你花十分钟验证一下。建议的行动路线很简单先按 CSS 类名的方式把页面撑起来遇到需要精细控制的图标再切内联或精灵图最后有余力再去研究字体构建。想动手玩一玩构建流程的话可以克隆仓库本地跑一遍git clone https://gitcode.com/gh_mirrors/ic/icons cd icons npm install npm run icons跑完你会发现那些看似复杂的字体生成其实只是一条顺手的流水线。先从第一个.bi-类名开始吧。【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/icons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考