Hi everybody! One of the things that I really struggle with when I'm trying to come up with example webpages are the graphics. Because, one, I'm not a very good artist myself, and two, I'm always a little bit worried about what I'm allowed to use and what I'm not allowed to use. One of the things I noticed is that a lot of people on a lot of sites use these really cool icons, so I wanted to find out where do they get them from and how do they work. And what I discovered is something called Font Awesome. So what you get with Font Awesome is a whole set of these downloadable icons that are really well done. They scale really large or very small, they can be customized with different CSS, you don't need JavaScript to use them. In general, they're a very cool tool that you might want to learn how to use. To get started, you would simply go to the Font Awesome website. When you get there, there's a Get Started, or sorry, there's a Start Navigation that talks about the different ways that you can use Font Awesome. The two that you're already familiar with are to, one, download the code and just keep it locally on your own computer or server. Or second, you can give them your email and they'll send you a link to a CDN or Content Delivery Network. We did this same thing with Bootstrap where using a link you don't need to keep track of the code, they'll do it for you. So once you decide if you're going to use Font Awesome, which way you want to connect to it, I want to show you some easy and cool ways that you can incorporate it into your page. Let's get started by looking at the Cheatsheet. The Cheatsheet is simply a list of all the different type of icons available. I believe, right now, there are over 365. Of course, you can't really see them, because it's small on my screen. So let's go ahead and put some of them in a file and run it. Over here in my code, I've done the usual making my metadata. I linked to the copy of font awesome that I have on my computer. And then down here, the classic way to always set up your font awesome icons is to use the i tag. It's simply i, and then inside the class, you always include fa, for font awesome, and then from there, you have your choice of different icons you use. So in this case, I'm simply going to do the bus icon. Let's take a look. When you go over here, you can see that the icon provided is this little bus. Let me add two or three more. If I go right here, I also have a calendar, a calculator, and let's add a bullseye as well. When I refresh the page, you can see I now have four icons that look really cool. If I make the screen bigger or smaller, or actually if I zoom in or out, you can see that they scale really well. Now, one of the things you might want to do is still customize these icons to your particular page. You can do that using additional classes or using CSS. So, for instance, I can include fa-3x would mean make this three times as big. So let's look at the calculator before, and then afterwards. Another thing we can do is actually go in and write rules for these different classes. So, in this case, I've gone in and I've said, hey, for the bus and the calculator I want you to make those green. But for the bullseye, I want you to make it red and, hey, let's also play with the opacity, kind of fade it out a little bit. Let's see how this looks when I add it to my HTML. Here we go. I'm going to refresh and you can see that these ones are green, the one at the bottom is a very faded out red. So you can see that there's a lot of cool things you can do either with the Font Awesome classes or with your own CSS. So, I'm going to end on one last example that I really like which is one of the spinners. So, in this case, I am using a lot more classes. But by now, I am hoping that doesn't intimidate you. You're telling it we are going to use something from Font Awesome, it's going to be a refresh. I want it to spin. I want it to be three times as big. And to be completely honest, I don't even remember what the fa-fw does, so as a learning exercise, you can kind of go look it up. And what we have afterwards is saying, hey, I want you to show this loading. So let's see how this looks now on our final Font Awesome example. You can see we now have this kind of really cool loading gif that you can have for your page. If you decide to later, what you can do is you can incorporate this with some JavaScript or different things so that you only have the loading icon sometimes, or it can run for a few seconds between each page. In general, adding these little tiny classes and using these tools is going to make the difference for your page looking kind of novice towards making it look more and more professional. So, go ahead, maybe use this as one of your extras and have some fun looking at the different things you can add to your page.
