How to use icons with NavigationProvider that are

问题:

I would like to use icons with the NavigationProvider that are not available in the material design offerings.

Inside the SetNavigation method, we build up the Main Menu.

There is an option to set the icon property by using the Material Design icon name — for example, the menu item below uses the "people" string to display the png:

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

Can other icons be used besides the material design ones? If so, how do I reference the image or icon?

Thanks

回答1:

ASP.NET Core + Angular

Modify the following in sidebar-nav.component.ts:

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

Modify the following in 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>

You may want to add some Styling (see below) in sidebar-nav.component.html.

ASP.NET Core + jQuery

Modify the following in *NavigationProvider.cs:

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

Modify the following in 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>
    }
}

You may want to add some Styling (see below) in SideBarNav/Default.cshtml.

Styling

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

回答2:

you can use font awesome as well like below

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