CODEWITHSUNDEEP
htmlfont-awesome
Matt McCarthy
Matt McCarthy

Reputation: 484

Font Awesome icons not rendering via cdn.fontawesome.com

I am trying to get Font Awesome icons working on my site, but I'm having issues with the JS file provided to me. I went to https://cdn.fontawesome.com/, and generated a code for myself, but when I link to it, the icons don't work. I have used FA in the past, using either CSS or the development kit. Here's an example HTML page, with an embed code specific to this post:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FA Example</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://use.fontawesome.com/31263fc466.js"></script>
  </head>
  <body>
    <p style="text-align: center;">
      <code>fas fa-chevron-down</code>
      <i class="fas fa-chevron-down"></i>
    </p>
  </body>
</html>

I am seeing a Unicode F078 character, which is correct, but my browser is not rendering the icon.

Earlier, I saw this error: CORS-Missing-Allow-Origin, but it went away when I installed a browser extension to allow all for the request (just for localhost; I know to set it in my Nginx config for production). I'm not sure if this is relevant to the error or not, but I thought I'd mention it as I hadn't seen it with other link or script tags

Also, let me know whether or not it renders correctly on your end. Any help is appreciated.

Upvotes: 2

Views: 1375

Answers (1)

andrew jones
andrew jones

Reputation: 96

Your problem your version doesn't include fas it includes fa

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FA Example</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://use.fontawesome.com/31263fc466.js"></script>
  </head>
  <body>
    <p style="text-align: center;">
      <code>fas fa-chevron-down</code>
      <i class="fa fa-chevron-down"></i>
    </p>
  </body>
</html>
to use fas use this library

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FA Example</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <p style="text-align: center;">
      <code>fas fa-chevron-down</code>
      <i class="fas fa-chevron-down"></i>
    </p>
  </body>
</html>

Upvotes: 2

Related Questions