代码之家 › 专栏 › 技术社区 › jazb

如何将图标与非材质设计的导航提供程序一起使用?

aspnetboilerplate font-awesome customization icons c#

-1

jazb · 技术社区 · 6 年前

我想用图标 NavigationProvider 在 material design offerings .

在 SetNavigation 方法,我们构建主菜单。

有一个选项可以设置 icon 属性。例如,下面的菜单项使用 "people" 显示PNG的字符串:

enter image description here

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

除了材料设计图标外,还可以使用其他图标吗?如果是,如何引用图像或图标?

谢谢

2 回复 | 直到 6 年前

aaron 6 年前

ASP.NET核心+角型

在中修改以下内容 nav.component.ts侧边栏 :

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

在中修改以下内容 边栏-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>

您可能需要添加一些造型 (见下文)在 边栏-nav.component.html .

ASP.NET核心+jquery

在中修改以下内容 *导航提供程序.cs :

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

在中修改以下内容 侧边栏/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>
    }
}

您可能需要添加一些造型 (见下文)在 侧边栏/default.cshtml .

造型

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

Alper Ebicoglu 6 年前

你可以用下面这样的字体

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

推荐文章

Robert King · Unity C#语法问题-转换位置

1 年前

JBryanB · 如何从基本抽象类访问类属性

1 年前

Anders Sewerin Johansen · 使用Moq提供一个利用mock的具体对象

1 年前

Community wiki · 基于两个参数在文本框中使用上下文键自动完成?

1 年前

Community wiki · SqlConnections,Parallel.For,一个旧的C#应用程序,初始化SqlConnections时随机挂起

1 年前

kling · LINQ生成的IEnumerable与原始列表之间的关系是什么?[副本]

2 年前

Adil15 · 以下方法和属性之间的调用不明确-Linq和MoreLinq

2 年前

law · 检查答案按钮的输入字符串格式不正确

2 年前

Laurian Avrigeanu · 如何执行嵌套的ContextMenu实现?

2 年前

i_sniff_ket · 在unity之外使用unity类

2 年前