5分钟上手Bootstrap Icons：从安装到调色的完整教程

5分钟上手Bootstrap Icons：从安装到调色的完整教程

【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/icons

需要在按钮、导航或表单里快速加图标，又不想自己画？Bootstrap Icons 是 Bootstrap 项目的官方开源 SVG 图标库，2000 多个图标统一按 16×16 网格绘制，这篇入门教程带你 10 分钟内完成安装、引用和配色。

一、先认识它

• 定位：Bootstrap 项目的官方图标库，线宽、圆角、网格全部一致，和自有页面混用不违和。
• 许可：MIT 协议，商业项目可放心使用，没有版权顾虑。
• 规模：共 2078 个图标，覆盖箭头、日历、天气、媒体、社交等日常场景。
• 包含内容：除单张 SVG 源文件外，还提供图标字体（woff2）和打包好的 SVG 精灵图，一次安装三种用法齐全。

二、拿到手

最推荐用包管理器安装，一条命令装完，后面升级也方便：

npm i bootstrap-icons

PHP 项目改用composer require twbs/bootstrap-icons；如果想看源码或参与维护，直接克隆整个仓库：

git clone https://gitcode.com/gh_mirrors/ic/icons

装完包里有三类资产：icons/ 下是单张 SVG，font/ 下是图标字体和样式表，根目录的 bootstrap-icons.svg 是精灵图，无需额外构建。

三、用起来

1. 图标字体（最常用）：引入 font/ 下的 CSS 后即可直接写类名，类名和图标文件名一致：

<i class="bi bi-alarm"></i>

2. SVG 精灵图：引用一次 bootstrap-icons.svg，页面上无论复用多少遍都只发一个 HTTP 请求，颜色跟随 currentColor，换主题改一处即可：

<svg class="bi" width="32" height="32" fill="currentColor"> <use xlink:href="bootstrap-icons.svg#alarm"/> </svg>

3. 内嵌 SVG：把 icons/ 里的 SVG 文件内容复制到 HTML，可控性最高，适合要单独改路径或加动画的场景，文件已做优化，单张只有几百字节。

四、用好它

• 尺寸：把图标设为width="1em" height="1em"，之后用font-size就能整体缩放，不用逐个改。
• 颜色：SVG 图标全部是fill="currentColor"，改文字颜色即改图标颜色；字体方式同理，改color即可。
• 性能：图标多时优先用字体或精灵图减少请求；用<img>引用就只挑实际用到的图标，放到自己的静态目录。
• 无障碍：纯装饰图标加aria-hidden="true"；图标是唯一内容（如单独按钮）时补aria-label，让读屏器知道含义。

五、遇到问题

• 找不到图标：命名都是英文连字符，实心版本带-fill后缀（alarm-fill 即实心闹钟），按alarm这类词根搜基本都能命中。
• 类名不生效：字体方式必须加载 font/ 里的 bootstrap-icons.css，否则bi-*类没有效果；精灵图的#片段名要写成图标文件名去掉.svg的部分。
• 版本漂移：别手动下载 zip 到处拷，用包管理器锁定版本，项目升级时图标库同步更新。

具体用法与每个图标的独立页面都在官方文档里，icons/ 目录就是完整的 SVG 源文件，文章没覆盖的细节先去那里查；有问题或想提新图标建议，可以直接到项目 issue 区留言。

【免费下载链接】iconsOfficial open source SVG icon library for Bootstrap.项目地址: https://gitcode.com/gh_mirrors/ic/icons