Note

You will need to use the FontAwesome CDN for the latest version of icons. Place this script tag in your project instead of the link tag used in the ###video

<script src="https://kit.fontawesome.com/0f3793b933.js" crossorigin="anonymous"></script>

Also note you may need to apply styles for FA icons to show up in your project, an FA sometimes removes or changes icons so check their free icon ###names.

Alternatively, if you continue to have issues with using FA, it is recommended you create a free account with an individual provider link:

https://docs.fontawesome.com/web/setup/get-started

Whenever I hear that students are running into a potential issue, then I wanna push up and update just so that you're not spending a lot of time confused or having to go through a complex debugging type session. So in the very next episode, I'm gonna show you how to integrate Font Awesome into the application. But Font Awesome has changed slightly since I originally recorded this, and so there's a slightly different process that you need to implement in order to get it working, and so I'm gonna show that to you right now, and then you'll be able to implement it in the next video.

So right here, I'm not working on the project itself. I have just a dedicated html file, and this is gonna give you a little preview of how to import Font Awesome. So right here, this is what we're gonna do. We're gonna make a link call, and we're going to import the style sheet for Font Awesome, and that's gonna give us the ability to have all the icons, and this url right here had a few issues for certain students on certain systems,

and this is what I, this is the exact url that I show in the next video, so I don't want you to use that one, or if you do use it and your icons don't show up, then you can implement this fix.

So if I switch to the browser here, you'll see that this is working for me, and it might still work on your machine. It's only on machines that have certain firewall settings and certain browser rules that this breaks for. And so this, the fix I'm gonna show you, is something that may not even be necessary, but I wanted to include it just in case. So in order to get this working, we simply need to change this url here.

So I'm gonna get rid of the entire link here, and in another window, I brought over the link that you need to use, so I'm just gonna paste this in. And this is a pretty long link, so do not worry about actually having to type all of these characters in, because that would not be fun.

In the show notes, at the bottom of this guide, you can go and just copy this link and that's what you can use in the next video. You can see, I'm using a slightly different version of Font Awesome, but it's gonna be exactly the same in terms of how you make the calls and how the icons show up, and then it has a few flags here, and this is the reason why it's going to work, it has a cross origin flag, and then it has an integrity flag, and so certain browsers that have settings where the security's pretty high, the old url call was not working for those.

So this is one that will work, and so if you run into any issues, you can just use this code, and if you switch right back to the browser, you'll see that still working. So good luck in the next lesson.

New Import Code

<script src="https://kit.fontawesome.com/0f3793b933.js" crossorigin="anonymous"></script>