Why does the font-awesome provided link not work and show horizontal bars?-CodePudding

I'm trying to use font awesome on my site and it's not working properly. I was sent an email and told to just paste the element in my site's header. This is the element.

<script src="https://use.fontawesome.com/b219f80601.js"></script>

I did all that but it's not working and displays as shown in the image. When I try my older code from a different account it uses kit instead of use and renders properly.

<script src="https://kit.fontawesome.com/[redacted].js" crossorigin="anonymous"></script>

The icon I tried to use was fas fas user

<i ></i>

What might be happening here? Also, font-awesome did not add the crossorigin attribute to the newer tag.

A note: I'm also using bootstrap 5.

This is my header:

<head>
   <script src="https://use.fontawesome.com/b219f80601.js" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="https://use.fontawesome.com/b219f80601.css" media="all">
   <title></title><link rel="stylesheet" href="/stylesheets/main.css"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

And this is the script tag for bootstrap at the end of the body tag:

<body>
   ...
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

Note 2: The embed codes I make and edit can only go up to v4.7.0.

CodePudding user response：

It looks like your JS link does not actually provide the CSS required to render the icon. You need to include at least the base and solid icon set CSS.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/fontawesome.min.css" integrity="sha512-P9vJUXK LyvAzj8otTOKzdfF1F3UYVl13 F8Fof8/2QNb8Twd6Vb VD52I7 87tex9UXxnzPgWA3rH96RExA7A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/solid.min.css" integrity="sha512-tk4nGrLxft4l30r9ETuejLU0a3d7LwMzj0eXjzc16JQj 5U1IeVoCuGLObRDc3 eQMUcEQY1RIDPGvuA7SNQ2w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://use.fontawesome.com/b219f80601.js"></script>

<i ></i>

Also, upon review of the CSS tag you have in your header, I think you may be trying to use FAv5 JS with FAv4 CSS.

CodePudding user response：

It was an accounts issue. The account hadn't been confirmed but emails with embed codes had been sent regardless.

The emails sent me to

Once the account had been registered I was able to log into the site and access font-awesome 5 regularly and create new kits. These links start with kit instead of use