Bootstrap Icons 图标字体实战一次加载 2000 图标改色改大小只需一行 CSS【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/icons如果你也被图标太多、请求太慢、风格不统一这三座大山压得喘不过气那么 Bootstrap Icons 图标字体值得你花五分钟了解一下。这个开源的 SVG 图标库内置了 2000 现成图标还附带一条把图标自动编译成字体文件的完整流水线前端项目引入后一次请求即可拿到全部图标颜色、尺寸统统交给 CSS 控制。那个改图标的深夜我差点想转行去年做一个后台管理系统需求文档里标注了 47 个图标。我老老实实去各种图标网站下载 PNG结果页面加载完光图标就发出去几十个请求首屏白屏两秒起。更要命的是甲方隔三差五说这个颜色再深一点那个再大一点我只能打开 PS 一张张改改到怀疑人生。后来同事甩给我一句话用 Bootstrap Icons 啊图标是字体改颜色就是改color改大小就是改font-size。那一刻我才意识到原来图标这件事早就有更聪明的解法。两条命令图标立刻上岗最快的方式是直接装现成的 npm 包不用克隆仓库、不用自己构建npm install bootstrap-icons然后引入 CSS 文件随手写一个图标link relstylesheet hrefnode_modules/bootstrap-icons/font/bootstrap-icons.css button classbtn btn-primary i classbi bi-bell/i 开启提醒 /button没错就这三步。图标通过font-face加载浏览器只发一次字体文件请求页面里用多少个图标都不会增加额外的网络往返。如果你想把整套构建工具链也拿到手方便后面自定义图标那就克隆源码仓库再装依赖git clone https://gitcode.com/gh_mirrors/ic/icons cd icons npm install装完后font/目录里已经躺着全部成品bootstrap-icons.css完整样式、bootstrap-icons.min.css压缩版、fonts/bootstrap-icons.woff2和fonts/bootstrap-icons.woff两种格式的字体文件。直接用什么都不用配置。图标怎么用四种姿势按需选择同样是alarm这个闹钟图标可以按下面四种方式调用我从简单到灵活给你排个序方式代码示例适合场景CSS 类名i classbi bi-alarm/i日常开发最省事SVG 精灵图svguse hrefbootstrap-icons.svg#alarm//svg需要多色、渐变等精细控制内联 SVG直接把path贴进 HTML单页面、静态页img 标签img srcicons/alarm.svg alt闹钟内容区插图、SEO 场景其中 CSS 类名最常用因为它天生继承文字样式i classbi bi-alarm text-danger/i !-- 跟随主题色 -- i classbi bi-alarm stylefont-size: 32px;/i !-- 直接放大 --bi-前缀的类名通过::before伪元素把字体的私有区编码映射成图标原理上和你用font-awesome完全一致只是这套图标更贴合 Bootstrap 生态。往库里塞自己的图标一条命令全自动开源库里的图标未必覆盖你的业务场景比如电梯维修疫苗登记这种冷门需求。别急这个项目的重头戏就是把自定义 SVG 转成图标字体的全流程自动化了。规则很简单把设计好的 16×16 网格 SVG 文件丢进icons/目录然后执行npm run icons这条命令内部串起了三条流水线icons-main调用 SVGO 对每个 SVG 做压缩瘦身icons-sprite把全部图标合成为一张精灵图bootstrap-icons.svgicons-font用 fantasticon 生成 woff/woff2 字体和配套 CSS、SCSS、TypeScript 类型声明。构建完你会发现font/bootstrap-icons.css里自动多了一行类似这样的规则新图标立即获得bi-xxx类名.bi-vaccine::before { content: \f7a1; }关于 SVG 文件的规范项目的svgo.config.mjs里写得很清楚SVGO 优化后会把每个图标统一成width16 height16、viewBox0 0 16 16、fillcurrentColor的标准结构并自动补上classbi bi-图标名。所以你在设计时只要保证图形在 16×16 画布里居中、使用纯填充路径即可其他细节交给脚本。新手最容易踩的 3 个坑坑一图标渲染成豆腐块方框原因字体文件路径写错或者 CSS 根本没加载成功。解决打开浏览器开发者工具的 Network 面板看woff2请求是否 200再检查 HTML 里link的 href 是否指向了正确的bootstrap-icons.css。路径建议用相对项目根目录的写法别依赖相对当前页面的../。坑二给图标设置颜色没反应原因某些用法下图标不继承文字颜色比如通过img标签引用时。解决CSS 类名和 SVG 精灵图方式天然支持currentColor直接改父元素color即可如果用了内联 SVG请确认path上没有写死fill属性。一句话口诀想要能换色就顺着字体这条链路走。坑三图标大小怎么调都不对原因把字体图标当图片用去改width/height自然无效。解决字体图标的尺寸由font-size决定行高由line-height决定。想要 32px 就用font-size: 2rem想要垂直居中就再配一个display: inline-block和vertical-align: -0.125emCSS 里已经帮你内置好了。让图标更快的三个小技巧技巧一优先用 WOFF2。同样一套图标WOFF2 体积通常比 WOFF 再小 30% 左右而且主流浏览器全兼容font/目录里两个格式都备好了CSS 里已经写好回退链。技巧二给字体文件上长缓存。字体属于改一次、用很久的静态资源服务端可以放心设置一年缓存配合文件名里的版本号 hash既能命中缓存又不怕更新失效location ~* \.(woff2|woff)$ { expires 1y; add_header Cache-Control public, immutable; }技巧三不需要全套字体时按需裁剪。如果你只用到十几个图标可以考虑把用到的 SVG 单独拿出来内联进页面或者用构建工具做子集化subset把字体文件从几百 KB 砍到几 KB。图标库提供的是完整方案具体怎么用完全可以按项目量级灵活调整。常见问题QBootstrap Icons 一定要配合 Bootstrap 框架吗A不需要。图标库独立发布任何 HTML 项目、Vue、React 都能用只是和 Bootstrap 的配色工具类配合起来最顺手。Q图标可以商用吗A可以。项目采用 MIT 协议个人和商业项目都能放心用改造成自己的图标集也没问题。Q想更新图标库版本怎么办Anpm 方式直接npm install bootstrap-iconslatest源码方式则先git pull拉取最新代码再重新跑一遍npm run icons和文档构建即可。别犹豫了现在就去体验Bootstrap Icons 把找图标、管图标、生成字体三件麻烦事打包成了一个开箱即用的开源项目2000 现成图标随取随用自定义图标一条命令自动转成字体性能、兼容性、样式控制全都替你考虑好了。把图标从图片变成文字来对待你会发现整个前端体验瞬间顺滑了一个档次。现在就克隆仓库跑一遍npm run icons亲手感受一下从 SVG 碎片到高性能字体的魔法吧。【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/icons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考