FontAwesome 5 frustration!

1

So, Font Awesome, which used to be really easy to use, has released version 5. I dutifully downloaded the free download, unzipped it, and copied the web-fonts-with-css to my project folder. Inside this are the webfonts folder and the fontawesome-all.css file (inside the css folder). Per the instructions on the fontawesome website, I only need to:
a) include the webfonts folder and the fontawesome-all.css file in my project folder
b) reference the file in a link tag in my HTML document head section, and
c) put the icons I want to use in the HTML document using a tag such as

<i class="fab fa-github-square"></i>

and the icon would magically appear on the web page.

Well, nothing is showing up, and the troubleshooting section on the fontawesome website seems to be all about svgs. Anyone know how to get an icon to show up? Am I missing a step?

2

Can you try using the CDN and see if it works?

I tried the CDN on both local and codepen, and it works.
(Though I have to agree with you, v5 has been a pain vs. v4)

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>
1 Like
3

I’m not even sure what CDN means - I thought it had something to do with Bootstrap, which I’m not using.

I pasted the code into my head and commented out the link to the fontawesome-all.css file. It didn’t work, so, since they are script tags, I moved them down to just above the closing body tag. That didn’t work, either.

I’m not saying your code doesn’t work. I must be missing something. I am using the icon names from the fontawesome website. I’m not getting anything - not a broken link icon, not an error message, not anything.

4

Under codepen, go to Settings, and paste the code above under “Stuff for Head”

CDN = content delivery network. All your css and js files are hosted in the cloud. Just need to paste the code, then you can start using that library/framework/script/css/whatever.

5

Okay, I tried that, and still nothing. Would you mind going taking a look? I really think it’s my code, not your info. Please look here: https://codepen.io/LisaWillCode/pen/PRprLM

6

this seems to work …

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
7

If you’ll be using brands, make sure to include the brands js

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/regular.js" integrity="sha384-t7yHmUlwFrLxHXNLstawVRBMeSLcXTbQ5hsd0ifzwGtN7ZF7RZ8ppM7Ldinuoiif" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/brands.js" integrity="sha384-sCI3dTBIJuqT6AwL++zH7qL8ZdKaHpxU43dDt9SyOzimtQ9eyRhkG3B7KMl6AO19" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>

or use the all.js

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

see this fork of your code

1 Like
8

Thanks. I ended up using a substitute for Font Awesome for now. I’m working on something else right not, but I’ll circle back to this once I’m done and let you both know how your solutions work.

9

A bit late but the i tag works referring to all.css using Font Awesome 5.13.0
<link rel="stylesheet" href="css/all.css">