Bootstrap 图标库提供了一系列美观且简洁的图标,可轻松添加到项目中。步骤包括:安装 Bootstrap添加 CDN 或将其包含在 HTML 中使用图标()自定义图标大小和颜色(使用 CSS 类)

如何在项目中使用 Bootstrap 图标库
Bootstrap 图标库是一个简洁且美观的大量图标集合,可添加到 Bootstrap 项目中。以下是如何使用它:
步骤 1:安装 Bootstrap
通过以下方式安装 Bootstrap:
npm install bootstrap
步骤 2:添加 CDN 或将其包含在您的 HTML 中
在您的 HTML 文件中,包含 Bootstrap 图标库 CDN:
或者,将其包含在您的 HTML 文件中:
步骤 3:使用图标
在您的 HTML 中,使用以下语法添加图标:
例如,要添加一个房子图标,请使用:
自定义图标大小和颜色
您可以使用 CSS 类来自定义图标的大小和颜色:
大小:
-
bi-1x:小号 -
bi-2x:中号 -
bi-3x:大号 -
bi-4x:特大号
颜色:
-
bi-primary:蓝色 -
bi-secondary:灰色 -
bi-success:绿色 -
bi-danger:红色 -
bi-warning:黄色 -
bi-info:蓝色
例如,要添加一个大号蓝色房子图标,请使用:
提示:
- 确保您使用正确的图标名称。完整的图标列表可在 Bootstrap 官方网站上找到。
- 您可以在自定义 CSS 中覆盖默认图标样式。
- 图标库中还有其他有用的 utility 类,例如
bi-border-rounded和bi-flip-horizontal。










