I'm experiencing issues with Font Awesome and Blazor Server 8 when using advanced navigation. I created a new basic application and placed one icon from the FontAwesome package on the homepage. When I start the application, it looks fine:
Then I choose "Counter," and when I go back to "Home," it looks like this:
I have to do a hard refresh, and then it looks good again. If you repeat this process, go back to "Counter" and back to "Home," the icon is oversized again. I have read this post https://github.com/dotnet/aspnetcore/issues/51696 , but I can't get this to work.
In my app.razor i have
<!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>My home.razor looks like:
@page "/"<PageTitle>Home</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<i class="fas fa-home"></i>There are no errors in the browser console or in the .NET console
Is there an working example available, or can someone help me to fix this?