【问题标题】：How to use icons with NavigationProvider that are not Material Design?如何使用非 Material Design 的 NavigationProvider 图标？
【发布时间】：2018-05-24 02:21:22
【问题描述】：

我想使用NavigationProvider 中没有的图标，这些图标在material design offerings 中不可用。

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

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

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

除了Material Design的图标，还可以使用其他图标吗？如果是这样，我如何引用图像或图标？

谢谢

【问题讨论】：

标签： c# icons customization font-awesome aspnetboilerplate

【解决方案1】：

ASP.NET Core + 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 Core + 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>

【讨论】：

【解决方案2】：

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

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"
    )
)

【讨论】：

不幸的是，fa 不适用于 MenuItemDefinition 类 - 我认为它可以，但尝试了一些但没有运气。
在你的项目中添加 font-awesome。在这个问题中，这家伙也使用了 fa 图标。 github.com/aspnetboilerplate/aspnetboilerplate/issues/2428
干杯，@arron 通过在视图中引入一些逻辑来根据图标的名称使用 fa 或 material。