0

I think I have followed the steps for a previous post about this question. But I get no error but I get an alternating question mark and exclamation point on the display. question/exclamation There are no errors in the Chrome debugger console. If I hover over these alternating "buttons" I don't get any tooltip or additional information. So it seems that the class has been recognized and the button loaded but there is some kind of error that I cannot determine. Here is what I have so far

  1. Downloaded and the zip of the FA components
    fontawesome components
  2. Add link to index.html under wwwroot (this is a client side Blazor application)
  3. Referenced the classes in my component
<button class="fas fa-angle-double-up">Up</button>
<button class="fas fa-angle-double-down">Down</button>

But this doesn't seem to work. Ideas? I have tried including the .js from Fontawesome but still no luck

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BreakpointManagement.App</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BreakpointManagement.App.Client.styles.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/font-awesome/css/all.min.css" />
    <script src="css/font-awesome/js/all.min.js"></script>
    <script src="_content/BlazorTable/BlazorTable.min.js"></script>
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>
Kevin Burton
  • 2,032
  • 4
  • 26
  • 43
  • Did you include the `.js` file as well in your `index.html`? Could you post the contents of that file? – Cory Podojil Mar 22 '21 at 16:42
  • I did not the post I referred to indicated that I didn't need it. I included it just in case but still not luck. i cannot include the full `index.html` but here is the applicable lines ` ` – Kevin Burton Mar 23 '21 at 03:28
  • I installed Font Awesome for Blazor WASM recently. I have many more folders and files compared to what is in your picture. For example, I have a folder labeled SVG. And I can see that the element (in my case an i element) is transformed into an svg element. I would suggest take a look at the Elements section in Chrome Browser for clues. Also I am wondering if you got the complete FontAwesome package since you are missing a lot of the folders that came in the downloadable package. – Jason D Mar 23 '21 at 14:22
  • Perhaps you can also share which version you installed. I downloaded 5.15.2 free for web which is working fine. – Jason D Mar 23 '21 at 14:30

1 Answers1

0

I added all paths, as @JasonD mentioned

enter image description here

added this line at component file

enter image description here

and added these lines at index.html

enter image description here

and voi-la

enter image description here

FabioGM
  • 269
  • 3
  • 5