Bootstrap

5天前更新 5 00

超过 2000 个专业设计的免费 SVG 图标,无缝兼容 Bootstrap 与现代前端框架

收录时间:
2025-08-06

Bootstrap Icons 是 Bootstrap 官方推出的开源 SVG 图标库,专为配合 Bootstrap 组件(如表单、导航等)设计,同时支持独立使用。它于 2020 年首次发布,目前图标数量已超过 1800 个,涵盖常用场景(如交互、工具、数据展示等)。所有图标均采用 SVG 格式,支持无损缩放与 CSS 定制,适用于 Web、移动应用等场景

Bootstrap

产品功能

  1. 多种集成方式
    • CDN 引用:通过 <i class="bi bi-图标名"> 快速调用(需引入官方 CSS)10。
    • SVG 嵌入:复制官网 SVG 代码直接嵌入 HTML,支持修改颜色、尺寸(如 fill="red")610。
    • NPM/Composer 安装:适用于工程化项目(npm install bootstrap-icons)46。
    • Sprite 拼合:通过 <use> 标签复用图标,减少重复代码26。
  2. 样式灵活定制
    • 尺寸调整:使用 fs-* 工具类(如 fs-3 调整大小)10。
    • 颜色控制:通过 text-* 类修改颜色(如 text-danger 设为红色)10。
    • 方向变换:支持旋转(bi-rotate-90)、翻转(bi-flip-horizontal)10。
  3. 组件无缝兼容
    可与按钮、导航栏等 Bootstrap 组件结合,例如在按钮内添加保存图标:
html<button class="btn btn-primary"><i class="bi bi-save me-2"></i>保存</button>

使用规则(版权、下载方式)

  • 开源协议:采用 MIT 许可证,允许在商业和非商业项目中免费使用、修改和分发,无需署名。
  • 下载方式官方网站:前往 https://icons.getbootstrap.com/ 下载整体 ZIP 包或单个 SVG 文件。

数据统计

相关导航

暂无评论

none
暂无评论...