Blazor 服务器和 Font Awesome：初始加载后 Svgs 未被替换

问题描述 投票：0回答：1

我遇到了一个问题，即我的字体很棒的图标在初始加载后没有更新。标签将被替换为 svg，但它始终是初始字体 Awesome icon / svg，并且当我导航和数据更新时，Blazor Server 中的 svc 不会被替换。

我找到了3篇文章，但它们似乎没有帮助：

https://github.com/dotnet/aspnetcore/issues/51696

使用 Blazor 排序时图标未更新

https://github.com/FortAwesome/Font-Awesome/issues/12556#issuecomment-619571925

我正在使用 .net 8 Core/Blazor 服务器。

我正在使用 SyncFusion SfCard，但我已经向他们的支持部门提交了一张票，但这不属于他们。

对我缺少的东西有什么想法吗？

这是我从以下位置提取很棒的字体文件的地方：

https://fontawesome.com/download => 6.5.1 网页版 => all.min.js

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="css/fontawesome/all.min.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
@*     <link rel="stylesheet" href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" /> *@
    <link rel="stylesheet" href="_content/Syncfusion.Blazor.Themes/fluent.css" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
    <script src="js/localStorage.js"></script>
    <script src="js/logoutOnly.js"></script>
    <script src="js/fontawesome/all.min.js"></script>
</head>

初始加载图像 -> 按应有的方式显示工具箱

单击查看会更改我的标题和描述，但图标仍然是工具箱，即使它应该是齿轮

<div class="container">
    <div class="row">
        @foreach (MenuItemInfoModel? item in FilteredMenuData)
        {
            <div class="col-md-3">
                <SfCard @ref="sfCard" CssClass="card mb-3">
                    <CardHeader Title="@item.Name">
                    </CardHeader>
                    <CardContent>
                        <i class="@item.IconTxt fa-2x" data-prefix="fas"></i>
                        @item.IconTxt
                   @*      <SfIcon IconCss="@item.IconTxt" Size="Syncfusion.Blazor.Buttons.IconSize.Medium"></SfIcon>
@* @*                         <SfIcon Name="@GetIconName(item.IconTxt ?? "Home")" Size="Syncfusion.Blazor.Buttons.IconSize.Large"></SfIcon> *@ 
                        @item.DescriptionTxt
                    </CardContent>
                    <CardFooter>
                        <CardFooterContent>
                            <SfButton CssClass="e-btn e-outline e-primary" Content="View" @onclick="(args) => onToggleClick(args, item)">
                            </SfButton>
                        </CardFooterContent>
                    </CardFooter>
                </SfCard>
            </div>
        }
    </div>
</div>
font-awesome blazor-server-side .net-8.0
1个回答
0
投票

为了解决这个问题，我必须只使用类而不是 SVG

  1. 删除对 font Awesome javascript 的引用
  2. 以正确的顺序从 font Awesome web download 添加网络字体
  3. 确保我的 App.razor 中的样式表引用与正确的文件夹结构正确

使用免费版font Awesome 6.5.1

我的理解是 Blazor 生命周期不包括更新 SVG 的功能，因为这是在 font Awesome javascript 文件等中完成的。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.