如何使用Bootstrap Icon？解决在a标签内调用显示为方块的问题

架构老林

2026-10-7

Bootstrap Icon显示方块（□）的解决方法

优先检查字体文件存放路径是否正确
Bootstrap Icons的css文件默认会从同级的fonts目录加载字体文件，你需要保证文件目录结构符合要求：
```
站点根目录
├─ css/
│  └─ bootstrap-icons.css
└─ fonts/
   ├─ bootstrap-icons.woff2
   ├─ bootstrap-icons.woff
   └─ bootstrap-icons.ttf
```
所有字体文件可以在你下载的Bootstrap Icons压缩包的fonts目录里找到，直接放到对应位置即可。
检查css文件的引入路径是否正确
如果你当前访问的页面不在站点根目录，相对路径会失效，可以改成站点绝对路径：
```
<link rel="stylesheet" href="/css/bootstrap-icons.css">
```
确认图标类名拼写正确
必须同时指定基础类bi和对应图标类，你代码里的bi bi-alarm-fill是正确写法，如果使用其他图标注意不要漏写bi前缀、不要打错图标名。
检查是否有样式冲突
如果有自定义CSS给<i>、<a>标签设置了其他font-family，会覆盖图标字体设置，可以添加如下全局样式强制指定：
```
.bi {
  font-family: bootstrap-icons !important;
}
```
排查加载错误
按F12打开浏览器开发者工具，切换到「网络」面板刷新页面，检查是否有bootstrap-icons.css或字体文件的404加载失败报错，根据报错的路径调整文件存放位置即可。