Blazor SSR项目中Bootstrap Icons 1.11.3无法显示的问题排查

一、CDN资源加载相关问题 #

• 确认CDN链接放置位置：确保<link>标签放在App.razor的<head>区块内，Blazor SSR的服务器渲染逻辑会优先处理head内的资源，放在body中可能导致资源加载不及时或不生效。
• 验证CDN资源是否加载成功：打开浏览器开发者工具（F12），切换到Network标签，刷新页面后查找bootstrap-icons.min.css，检查状态码是否为200。如果是404或其他错误，说明CDN链接可能失效（可直接复制链接到新标签页测试是否能打开）。
• 检查图标类名是否正确：Bootstrap Icons的正确使用格式是<i class="bi bi-alarm"></i>，需确保同时包含bi（基础类）和bi-alarm（具体图标类），缺任一都无法显示。

二、本地SVG文件无法显示的问题 #

• 确认文件路径与存放位置：静态文件需放在项目的wwwroot目录下，若你的images文件夹是wwwroot/images，则<img src="~/images/alarm.svg" />是正确路径；如果images在项目根目录而非wwwroot下，静态文件中间件无法访问，需移至wwwroot内。
• 检查静态文件中间件配置：在Program.cs中确认已添加app.UseStaticFiles();，这是Blazor SSR提供静态文件访问的必要配置，缺失会导致所有本地静态资源无法加载。

三、其他潜在问题 #

• CSS样式冲突：检查项目中自定义CSS或其他框架样式是否覆盖了Bootstrap Icons的字体样式，比如强制修改了font-family或设置display: none。可通过开发者工具的Elements标签查看<i>标签的实际样式，确认font-family: "bootstrap-icons"是否生效。
• 浏览器缓存干扰：尝试清空浏览器缓存（Ctrl+Shift+R强制刷新），避免旧的失效资源缓存导致图标无法正常显示。

内容的提问来源于stack exchange，提问作者Mark Bonafe