You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在.NET 6 Blazor应用中使用Bootstrap Icons?

.NET 6 Blazor中Bootstrap Icons不生效的解决办法
  • 你用的是旧版Bootstrap Glyphicons的类名(glyphicon glyphicon-chevron-left),但Bootstrap Icons是独立的图标库,类名规则完全不同,且需确保正确引入资源。
  • 步骤1:安装Bootstrap Icons
    通过NuGet包管理器安装Bootstrap.Icons,安装完成后,项目的wwwroot/lib/bootstrap-icons/font目录下会出现对应的CSS文件。
  • 步骤2:在布局文件中引入样式
    在Blazor WebAssembly的wwwroot/index.html或Blazor Server的Pages/_Layout.cshtml里添加样式引用:
    <link href="~/lib/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet" />
    
  • 步骤3:替换正确的图标类名
    Bootstrap Icons的类名格式为bi bi-图标名称,你的左箭头按钮代码应修改为:
    <button type="button" class="btn btn-secondary bi bi-chevron-left"></button>
    

内容的提问来源于stack exchange,提问作者az0009990

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.14 13:16:01