Blazor Server 8 高级导航字体很棒的超大图标

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

我在使用高级导航时遇到 Font Awesome 和 Blazor Server 8 问题。我创建了一个新的基本应用程序，并将 FontAwesome 包中的一个图标放置在主页上。当我启动应用程序时，它看起来很好：

enter image description here

然后我选择“计数器”，当我返回“主页”时，它看起来像这样：

enter image description here

我必须进行一次硬刷新，然后它看起来又好了。如果重复此过程，返回“计数器”并返回“主页”，图标会再次变大。我已阅读这篇文章https://github.com/dotnet/aspnetcore/issues/51696，但我无法让它工作。

在我的 app.razor 中我有

<!DOCTYPE html>
<html lang="en">

<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="Blfont.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <script src=https://kit.fontawesome.com/xxxxxxx.js crossorigin="anonymous"></script>
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

我的 home.razor 看起来像：

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<i class="fas fa-home"></i>

浏览器控制台或 .NET 控制台中没有错误

有可用的工作示例吗，或者有人可以帮我解决这个问题吗？

blazor font-awesome
1个回答
0
投票

我也遇到了同样的问题。我找到了两个解决方案，都使用下载的包（自托管），而不是链接的 CDN。

第一个解决方案是仅使用网络字体，而不使用Javascript，并将其包含在您的应用程序中。将 

webfonts
目录和 
all.css
（或 
fontawesome.css
与 
solid.css
）复制到应用程序资源库。我已将我的放在
wwwroot\lib\fontawesome\
中。链接 
app.razor
中的 css 文件，css 文件将包含 web 字体。此解决方案有效，但使用 
fa-xl
或 
fa-xs
等调整大小标签不起作用，因为这些标签需要 Javascript。

另一种方法是禁用“Blazor 的增强型导航”，这会导致问题，因为在导航操作后处理 Fontawesome 的 Javascript 不会运行。为此，您需要在页面的 

data-enhance-nav="false"
或 
<html>
标签中添加 
<body>
。您会看到每个页面在导航操作后都会完全加载，而不是刷新动态内容。此外，此解决方案似乎不适用于不同的尺寸。

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