如何使用不是Material Design的NavigationProvider图标？ [英] How to use icons with NavigationProvider that are not Material Design?

问题描述

我想使用 NavigationProvider 的图标=基线rel =nofollow noreferrer>材料设计产品。

在 SetNavigation 方法内，我们建立主菜单。

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

< img src =https://i.stack.imgur.com/0oNs2.pngalt =在此处输入图像说明>

  .AddItem（
新的MenuItemDefinition（
 PageNames.Doctors，
 L（医生），
 url：医生，
 icon：people ，
 requiredPermissionName：PermissionNames.Pages_Doctors 
）
）
  

除了材料设计之外，还可以使用其他图标吗？如果是这样，我如何参考图像或图标？

谢谢

解决方案

ASP.NET Core + Angular

修改 sidebar-nav.component.ts 中的以下内容：

  // new MenuItem（this.l（HomePage），， home，/ app / home），
新的MenuItem（this.l（HomePage），，fa fa-home，/ app / home），
  

修改 sidebar-nav.component.html 中的以下内容：

 <！ - < i * ngIf =menuItem.iconclass =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：，
 //图标：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> 
} 
其他
 {
< i class =material-icons> @ menuItem.Icon< / i> 
} 
} 
  

您可能想要添加一些样式（见下文） SideBarNav / Default.cshtml 。

样式

< pre class =lang-html prettyprint-override> < style>
.sidebar .fa {
font-size：24px;
身高：30px;
margin-top：4px;
text-align：center;
宽度：24px;
}
< / style>


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

解决方案

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>

这篇关于如何使用不是Material Design的NavigationProvider图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！