如何在 Blazor 8 的导航菜单中使用其他图标？

Question

我想在 Blazor

8

应用程序的 NavMenu.razor 中使用其他图标。在 Blazor 7 中，在

wwwroot/css/

中配置了一个图标集，因此我只能通过在

NavMenu.razor

中命名来使用其他图标。但 Blazor 8 模板中丢失了整个 css 文件夹。

NavMenu.razor.css

中只配置了三个图标，但我不知道如何在那里添加其他图标。 我不是 css 专家（真的不是:-()，如果没有我（缺少的）css 知识，我不知道如何解决这个问题。是否有可能像 Blazor 7 一样轻松获得新图标？

Answer 1

感谢 Kurt 的评论，我找到了解决方案。我不再使用标准图标，而是使用链接库中的图标，Blazorise.Icons.FontAwesome（https://blazorise.com/docs/extensions/icons）。 这样我就改变了

NavMenu.razor

:

中的导航点

<NavLink class="nav-link" href="counter">
    <Icon Name="IconName.Add" IconSize="IconSize.Large" />  @* new *@
    <span style="margin-right:0.8em;"></span> Counter  @* new *@
    @*<span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter *@   @* old *@
</NavLink>

所有可能的图标甚至可以在文档中找到。

我不知道如何使用一些更标准的图标，比如模板中的三个图标（这就是为什么这个响应不应该是正确的答案），但是使用另一个库，我可以使用更多的图标，如所需的。

Answer 2

是的，这是可能的。
但请注意，这可能会大大增加用户的下载量。

1. 在 App.razor 中，添加

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

2. 在 NavMenu.razor 中，从图标名称中删除 (3x)

   -nav-menu

   尾部（即，仅

   bi-house-door-fill

   ）

3. 在 NavMenu.razor.css 中，删除 3 个旧的 incons。

4. 在 NavMenu.razor.css 的

   .bi

   类中，设置

   top: -0.75rem;

最后一个是对齐图标的快速修复，您可能需要更好地调整该类。