如何在 C# Blazor WebAssembly 中使用 Bootstrap 图标？

Question

我正在 Microsoft Visual Studio 2022 中制作一个 Blazor WebAssembly 网站，我在让 bootstrap 图标显示在导航菜单上时遇到了一些问题。我通过 npm 安装图标并将 bootstrap 文件夹复制到项目查看器中的 wwwroot。

我的导航菜单项代码如下所示：

<div class="nav-item px-3">
            <NavLink class="nav-link" href="Spotify">
                <span class="bi bi-spotify" aria-hidden="true"></span> Spotify
            </NavLink>
    </div>

跨度 class 的默认值是 span class="oi oi-plus" 并且它运行很好并且那个图标出现了，但是当我运行具有新跨度的程序 class 代码如上，图标不会出现在文本旁边或任何地方。

Answer 1

您只需从引导程序 repo 复制 bootstrap-icons.svg。将其放入您的 wwwroot 文件夹中的一个文件夹中。

例如创建 emoji-smile-fill 使用。

<svg class="bi" width="24" height="24" fill="currentColor" >
    <use href="{folder-to-resource}/bootstrap-icons.svg#emoji-smile-fill"></use>
</svg>

Answer 2

在新项目中，wwwroor\css 文件夹包含 app.css 文件。

将第一行替换为 bootstrap 的 cdn 地址：

/*@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');*/  
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css");

然后在 NavMenu.razor 中将 "oi oi-home" 替换为 "oi bi-house"

就这些。

您当然可以在 NavMenu.razor 中将 .oi{ } 重命名为 .bi{ }。css 使其成为 "bi bi-house"，只是为了美观。

如何在 C# Blazor WebAssembly 中使用 Bootstrap 图标？

How do I use Bootstrap Icons in C# Blazor WebAssembly?

c#

visual-studio

blazor

blazor-webassembly

visual-studio-2022