如何在Blazor应用程序中更改默认图标提供程序？

Question

当您第一次创建Blazor项目时， 默认的图标提供者是Iconify，使用了他们开放的图标包。

我该如何更改图标提供商？

大多数网站提供一些 JavaScript 以在 html 页面中包含它，但由于我正在使用 Blazor 页面，所以我不使用这些。

要切换提供者，我需要做什么？

- BlazinBlazor

---

每个都有自己的资产需要引用。你尝试了什么？试着添加你想要使用的一个，你尝试过什么以及你得到了什么错误。 - Mister Magoo

Answer 1

这些图标来自于site.css中的@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

导入不同的图标

我使用了Material Icons

1.在site.css中导入Material icon：@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

2.使用Material Icons

例如：

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <i class="material-icons">
                    accessibility
                </i> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <i class="material-icons">autorenew</i>
                Counter
            </NavLink>
        </li>
    </ul>
</div>

- Rakesh T.R

Answer 2

我的解决方法是将以下链接放在头标签中，然后我就能成功获取图标了。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

然后像这样访问图标。

<i class="material-icons">face</i>

For more info check this document

- Siphamandla Ngwenya

Answer 3

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"  />

<i class="fa-solid fa-cog fa-spin me-3" aria-hidden="true"></i> Setting

字体惊人

https://cdnjs.com/libraries/font-awesome

- Mirko MyRent

---

欢迎来到SO！请添加一些解释。传授底层逻辑比仅仅给出代码更重要，因为它能帮助提问者和其他读者自行修复这个问题以及类似的问题。 - Marcelo Scofano Diniz