如何使用非 Material 设计的 NavigationProvider 图标？

Question

我想使用 NavigationProvider 中没有的图标 material design offerings。

在 SetNavigation 方法中，我们构建了主菜单。

有一个选项可以通过使用 Material 设计图标名称来设置 icon 属性 — 例如，下面的菜单项使用 "people" 字符串来显示 png：

.AddItem(
    new MenuItemDefinition(
        PageNames.Doctors,
        L("Doctors"),
        url: "Doctors",
        icon: "people",
        requiredPermissionName: PermissionNames.Pages_Doctors
    )
)

除了material设计的图标还能使用其他图标吗？如果是，我该如何引用图像或图标？

谢谢

Answer 1

你也可以像下面这样使用真棒字体

AddItem(new MenuItemDefinition(
    PageNames.App.Tenant.Google,
    new FixedLocalizableString("Google"),
    icon : "fa fa-bar-chart",
    requiredPermissionName : AppPermissions.Pages_Google,
    url : "http://www.google.com",
    target : "_blank"
    )
)

Answer 2

ASP.NET核心+Angular

在sidebar-nav.component.ts修改如下：

// new MenuItem(this.l("HomePage"), "", "home", "/app/home"),
new MenuItem(this.l("HomePage"), "", "fa fa-home", "/app/home"),

在sidebar-nav.component.html修改如下：

<!-- <i *ngIf="menuItem.icon" class="material-icons">{{menuItem.icon}}</I> -->
<i *ngIf="menuItem.icon && menuItem.icon.startsWith('fa ')" class="{{menuItem.icon}}"></i>
<i *ngIf="menuItem.icon && !menuItem.icon.startsWith('fa ')" class="material-icons">{{menuItem.icon}}</I>

您可能想在 sidebar-nav.component.html.

中添加一些样式（见下文）

ASP.NET核心+jQuery

在*NavigationProvider.cs中修改如下：

new MenuItemDefinition(
    PageNames.Home,
    L("HomePage"),
    url: "",
 // icon: "home",
    icon: "fa fa-home",
    requiresAuthentication: true
)

在SideBarNav/Default.cshtml中修改如下：

@if (!string.IsNullOrWhiteSpace(menuItem.Icon))
{
    <!-- <i class="material-icons">@menuItem.Icon</i> -->
    @if (menuItem.Icon.StartsWith("fa "))
    {
        <i class="@menuItem.Icon"></i>
    }
    else
    {
        <i class="material-icons">@menuItem.Icon</i>
    }
}

您可能想在 SideBarNav/Default.cshtml.

中添加一些样式（见下文）

造型

<style>
    .sidebar .fa {
        font-size: 24px;
        height: 30px;
        margin-top: 4px;
        text-align: center;
        width: 24px;
    }
</style>

如何使用非 Material 设计的 NavigationProvider 图标？

How to use icons with NavigationProvider that are not Material Design?

c#

customization

icons

font-awesome

aspnetboilerplate

ASP.NET核心+Angular

ASP.NET核心+jQuery

造型