用途:Bootstrap Icons 是 Bootstrap 官方开源图标库,含 2000 多个图标,用于在网页与 Bootstrap 组件中展示图标。当前版本为 1.13.x,最新版本可查看 https://icons.getbootstrap.com。
安装方式:CDN 最快,引入 https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css;npm 使用 npm install bootstrap-icons,再在 SCSS 中 @import "bootstrap-icons/font/bootstrap-icons.css" 或在 JavaScript 中 import 'bootstrap-icons/font/bootstrap-icons.css';也可从官网下载本地文件;PHP 项目可用 composer require twbs/bootstrap-icons,并在 Laravel Blade 或 Symfony Twig 中引用 vendor 目录下的 SVG。
主要用法:图标字体最简单,写 <i class="bi bi-"></i>,可随文字缩放并继承颜色;内嵌 SVG 无外部依赖、可用 CSS 和 JavaScript 控制、fill="currentColor" 继承文字颜色;SVG 雪碧图可一次引入后通过 <use> 复用;外部图片适合邮件模板、静态页和 CMS,但不能继承文字颜色且每个图标是单独请求;CSS 方法可用 background-image 或 mask,mask 可继承 currentColor,但 Safari 需要 -webkit-mask- 前缀。
样式与无障碍:可用 font-size、Bootstrap 的 fs-1 至 fs-6、text-* 工具类设置尺寸和颜色,用 align-middle 或 vertical-align 调整对齐。有含义的图标应提供可访问文本,如 visually-hidden、aria-label 或 title;纯装饰图标加 aria-hidden="true"。
常见模式:按钮、导航、列表、社交图标和图标徽章等。资料还提供 references/icon-categories.md、references/sass-integration.md、references/rails-integration.md 及两个示例 HTML 文件。限制:资料未提供收费、价格或效果承诺等信息。