工具介绍
了解Bootstrap Icons图标大全工具的功能特点和使用方法
什么是Bootstrap Icons？
Bootstrap Icons是Bootstrap官方推出的开源图标库，包含2000+个高质量SVG图标，完全免费且开源。这些图标设计风格统一，与Bootstrap框架完美配合，也可以独立使用。图标支持多种使用方式，包括SVG、字体图标、React组件等。
图标库特点
- 数量丰富：包含2000+图标，涵盖各种常用场景，从箭头、按钮到社交、媒体等各种类型。
- 设计统一：所有图标由Bootstrap团队设计，风格统一，线条清晰，视觉效果好。
- 多种格式：提供SVG、字体图标、React/Vue组件等多种使用方式，满足不同项目需求。
- 完全免费：MIT许可证，可免费用于个人和商业项目，无需付费。
- 易于使用：使用方式简单，只需引入CSS文件，添加对应的class即可显示图标。
使用方法
方法一：CDN引入（推荐）
在HTML的head中添加CDN链接：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
方法二：npm安装
npm install bootstrap-icons
方法三：下载使用
从官网下载图标文件，放入项目中，引入CSS文件即可。
如何使用本工具？
1. 在搜索框中输入关键词，快速查找需要的图标；
2. 点击分类标签，按类别（箭头、表单、导航、文件等）筛选图标；
3. 点击任意图标，即可复制图标的class类名；
4. 在HTML代码中使用：<i class="bi-图标名"></i>。
常见问题
关于Bootstrap Icons的常见问题解答
Bootstrap Icons可以商用吗？
可以。Bootstrap Icons采用MIT许可证，完全开源免费，您可以自由地用于个人项目和商业项目，无需付费，也无需署名（但署名表示感谢是被鼓励的）。
如何调整图标的大小和颜色？
Bootstrap Icons是字体图标，可以像文字一样调整大小和颜色。通过CSS的font-size属性调整大小，通过color属性调整颜色。例如：.bi-icon { font-size: 24px; color: red; }。也可以使用Bootstrap的工具类，如text-primary、fs-4等。
Bootstrap Icons必须配合Bootstrap使用吗？
不需要。虽然Bootstrap Icons是Bootstrap团队开发的，但它是一个独立的图标库，可以在任何项目中使用，无论是否使用Bootstrap框架。您只需要引入对应的CSS文件即可使用。
字体图标和SVG图标有什么区别？
字体图标是将图标制作成字体文件，通过CSS类名调用，优点是使用方便、支持任意缩放、可以改变颜色；SVG图标是直接使用SVG代码，优点是加载更快、可以修改单个路径的颜色、支持更复杂的效果。Bootstrap Icons同时提供这两种格式。
图标加载不出来怎么办？
如果图标显示为方框或乱码，可能是：1. CSS文件路径错误，检查链接是否正确；2. 字体文件加载失败，检查网络连接；3. 类名拼写错误，确认图标名称是否正确；4. CORS跨域问题，如果是本地文件可能有跨域限制，建议使用CDN或本地服务器。