ASP.NET Blazor & FontAwesome

Tarek Najem

5.00/5 (2投票s)

2022 年 7 月 21 日

CPOL

2分钟阅读

14541

189

一个全新的 Blazor 组件，旨在方便在 Blazor 中使用 FontAwesome 框架。

下载源代码 - 8.1 MB

引言

适用于 ASP.NET Blazor 的免费 FontAwesome 6 组件
.NET 6.0+，使用 Blazor WebAssembly 或 Blazor Server（其他托管模型尚未测试，.NET 6.0 完全支持）

Using the Code

在 FontAwesome 框架中使用组件有很多种方式，在 Blazor 中也不例外。我不会说这个组件是最好的、最快的或最简单的，但它是在众多免费组件中创建的，旨在方便在 Blazor 中使用 FontAwesome 框架。

在这个组件中，我通过添加一个 ‘AutoReplaceSvg’ 属性来解决这个 FontAwesome 框架中的主要问题，该问题阻止 Blazor 程序员在同一个程序中使用图层、蒙版以及响应 HTML 标签事件。

Jenin.FontAwesome.Blazor/EventsOnClickSnippet.razor at master · TarekNajem04/Jenin.FontAwesome.Blazor (github.com)

<IconContainer CssClass="mb-1 p-5" IconSize=IconSize.X02>
    <Icons>
        <Icon AutoReplaceSvg=ProcessingSvgMethod.False
              IconStyle=IconStyle.Solid
              IconName=@(IsChecked ? "fa-check-square" : "fa-square")
              Bordered=true
              BorderColor=@(IsChecked ? "green" : "red")
              BorderWidth="4px"
              Clicked=IconCliked
              @ref=Icon />
    </Icons>
</IconContainer>
 
@code {
    public Icon Icon { get; set; }
 
    int bw = 1;
 
    private bool IsChecked => bw % 2 == 0;
    private void IconCliked(ElementMouseEventArgs eventArgs) {
        bw++;
    }
}

除了简化设置 FontAwesome 框架以替换包含图标类别的 HTML 标签为 HTML SVG，或者将其作为容器来容纳 HTML SVG 之外。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
 
<body>
    ...
 
    <!--
        By default Font Awesome will replace elements. 
        However, setting this value to nest will cause Font Awesome 
        to add a child element to the existing <i> tag.
    -->
    <script src="_content/Jeninnet.FontAwesome.Blazor/js/fontawesome-Svg[nest]-config.js"
     type="text/javascript"></script>
 
    <!--OR -->
    <!--
        When false this will cause Font Awesome to use Webfont.
        When you set this property to false, 
        you will not be able to use the Layers feature.
        <script src="_content/Jeninnet.FontAwesome.Blazor/js/
         fontawesome-Svg[false]-config.js" type="text/javascript"></script>
    -->
 
    <script src="your-path-to-fontawesome/js/all.min.js" 
            type="text/javascript"></script>
    <script src="_content/Jeninnet.FontAwesome.Blazor/js/
     fontawesome-config-utilities.js" type="text/javascript"></script>
</body>
 
</html>

您还可以轻松地将此元素与 Bootstrap 框架结合使用，以创建带有您自己图标的 HTML 标签。

Bootstrap 框架与 Jenin.FontAwesome.Blazor

<button class="btn btn-outline-primary mb-4 ms-2 d-flex align-items-center gap-2" 
 @onclick=GotoStartPage>
    <Icon IconStyle=IconStyle.Solid IconSize=IconSize.X02 IconName="fa-bell" 
     Animation=@Animation.Shake() Color="gold" />
    <span>Are you ready?</span>
</button>
 
@code {
    [Inject]
    private NavigationManager NavigationManager { get; set; }
 
    private void GotoStartPage() => NavigationManager.NavigateTo("/icon-basics-style");
}

此组件不会要求您费心使用它。对于每个功能，您都可以在 github 存储库中找到一个示例以及源代码，以便您可以根据需要修改代码。

使用动画和变换的 Fluent API

Jenin.FontAwesome.Blazor/AnimationWithUtilitiesSnippet.razor at master · TarekNajem04/Jenin.FontAwesome.Blazor (github.com)

<IconContainer CssClass="mb-1 ps-4" FixedWidth=false IconSize=IconSize.X03>
    <Icons>
        <Icon CssClass="me-4" IconStyle=IconStyle.Solid IconName="fa-circle-plus"
              Animation=@Animation.Beat(delayUnit: DurationUnit.Seconds, delay: 5F)
              Color="#007AFF" />
 
        <Icon CssClass="me-4" IconStyle=IconStyle.Solid 
              IconName="fa-triangle-exclamation"
              Animation=@Animation.Fade(iterationCount: 15F)
              Color="#007AFF" />
 
        <Icon CssClass="me-4" IconStyle=IconStyle.Solid IconName="fa-magnet"
              Animation=@Animation.Bounce(timingFunction: 
              "cubic-bezier(0.2, 3, 0.2, 2)") 
              Rotate=IconRotate.RotateBy RotateAngle=90F
              Color="#007AFF" />
 
        <Icon CssClass="me-4" IconStyle=IconStyle.Solid IconName="fa-sync"
              Animation=@Animation.Spin(delayUnit: DurationUnit.Seconds, 
              delay: 3F, direction: AnimationDirection.Reverse)
              Color="#007AFF" />
    </Icons>
</IconContainer>

Jenin.FontAwesome.Blazor/TransformsPositioningSnippet.razor at master · TarekNajem04/Jenin.FontAwesome.Blazor (github.com)

变换结果

<IconContainer CssClass="mb-1 p-5" IconSize=IconSize.X04>
    <Icons>
        <Icon IconStyle=IconStyle.Solid IconName="fa-seedling" 
         Transform=Transform.Shrink(8) BackgroundColor="#8B9DC3" Color="#007AFF" />
        <Icon IconStyle=IconStyle.Solid IconName="fa-seedling" 
         Transform=@Transform.Shrink(8).Up(6) BackgroundColor="#8B9DC3" 
         Color="#007AFF" />
        <Icon IconStyle=IconStyle.Solid IconName="fa-seedling" 
         Transform=@Transform.Shrink(8).Right(6) BackgroundColor="#8B9DC3" 
         Color="#007AFF" />
        <Icon IconStyle=IconStyle.Solid IconName="fa-seedling" 
         Transform=@Transform.Shrink(8).Down(6) BackgroundColor="#8B9DC3" 
         Color="#007AFF" />
        <Icon IconStyle=IconStyle.Solid IconName="fa-seedling" 
         Transform=@Transform.Shrink(8).Left(6) BackgroundColor="#8B9DC3" 
         Color="#007AFF" />
    </Icons>
</IconContainer>

安装指南

入门

必备组件

Jenin.FontAwesome.Blazor 组件具有以下要求

.NET 6.0 或更高版本
Blazor WebAssembly 或 Blazor Server 托管模型（其他选项尚未测试）

安装

1. 安装包

通过 NuGet 包管理器找到 Jenin.FontAwesome.Blazorp 包，或使用以下命令进行安装

dotnet add package Jenin.FontAwesome.Blazor

2. 添加 CSS & JavaScript 引用

A. CSS

将以下内容添加到您的 HTML head 部分，具体是 index.html、_Host.cshtml 或 _Layout.cshtml，具体取决于您是运行 WebAssembly 还是 Server

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <base href="~/" />        ...        <!--load all Font Awesome styles -->
        <link href="/your-path-to-fontawesome/css/all.css" 
         rel="stylesheet">        ...    </head>    <body>
        ...
    </body></html>

有关如何自行托管的更多详细信息 — Font Awesome 自行托管 — Web Fonts

B. JavaScript

在 index.html、_Host.cshtml 或 _Layout.cshtml 的 HTML <body> 部分的末尾，添加以下内容

<!DOCTYPE html>
<html lang="en">
<head>
</head><body>
    ...    <!--
        By default Font Awesome will replace elements. 
        However, setting this value to nest will cause Font Awesome 
        to add a child element to the existing <i> tag.
    -->
    <script src="_content/Jeninnet.FontAwesome.Blazor/js/fontawesome-Svg[nest]-config.js"
     type="text/javascript"></script>    <!--OR -->
    <!--
        When false this will cause Font Awesome to use Webfont.
        When you set this property to false, you will not be able 
        to use the Layers feature.
        <script src="_content/Jeninnet.FontAwesome.Blazor/js/
         fontawesome-Svg[false]-config.js" type="text/javascript"></script>
    -->    <script src="your-path-to-fontawesome/js/all.min.js" 
            type="text/javascript"></script>
    <script src="_content/Jeninnet.FontAwesome.Blazor/js/
     fontawesome-config-utilities.js" type="text/javascript"></script>
</body>
</html>

3. 导入命名空间

将以下内容添加到您的 _Imports.razor 文件

@using Jenin.FontAwesome.Blazor;
@using Jenin.FontAwesome.Blazor.Extensions
@using Jenin.FontAwesome.Blazor.Components
@using Jenin.FontAwesome.Blazor.Transformations
@using Jenin.FontAwesome.Blazor.Animations

准备好了，开始吧！

您准备好了吗？

<button class="btn btn-outline-primary mb-4 ms-2 d-flex align-items-center gap-2" 
 @onclick=GotoStartPage>
    <Icon IconStyle=IconStyle.Solid IconSize=IconSize.X02 IconName="fa-bell" 
     Animation=@Animation.Shake() Color="gold"/>
    <span>Are you ready?</span>
</button>@code{
    [Inject]
    private NavigationManager NavigationManager{ get; set; }    
    private void GotoStartPage() => NavigationManager.NavigateTo("/icon-basics-style");
}

历史

2022 年 7 月 21 日：初始版本