How to add icons to your website using font awesome VS Code

Hi there, this video we are going to put in icons, and you're like, "Hey, that just looks like the logo, or the image, how hard can this be, why is the video so long, Dan?" It's because we're going to use fonts to do icons. We're going to look at something called Font Awesome, we'll look at Google's Material for icons. It's a clever way of implementing icons on your site without using images. There's pros and cons, and it's just another way from, instead of using things like PNGs or images for icons. Also note that at the end I have a false end, I'm like, "Yeah, thanks, and you're all done", and then carry on for a little bit, showing you some extra Padding at the top. So hang around for the last bit. All right, jump in, Dan. 

So what would have we done in the past? We would have added an image, a PNG or an SVG to our graphic, or to our code, and then in my Live View here, there is the icon here, and that's loading a JPEG, a PNG, or an SVG, so it's being downloaded. They're not very big, so you can just use images, that's fine, but we're going to look at using fonts or icon fonts in this particular video. I want to show it to you because there are lots of frameworks later on, that you might run into that use them. 

The other cool thing about them is that, there's just lots of cool-- you know, you don't have to design them yourself, they're all in nice little groups, they're free, there's all sorts of good reasons to use fonts, but for me personally, I end up-- the first thing I want to do when I download one of these fonts, is open up in Illustrator, and change it, and mess around with it. I'll show you that too, but let's use these font icons, they're really easy to use. 

So let's look at the two main players in this. Well, the main one is Font Awesome. Font Awesome works the same way as our Google Fonts. Remember, earlier on in the course when we were like, "I wish I had some great new fonts on my website." We added this bit of CSS, to go to Google Fonts, and we downloaded Playfair and Roboto. It's the same, exact same principle here for using Font Awesome, except, the font, they've changed out the ABC to Bacon, cake, burger. So that's all that's really happening. So let's go into it, let's do a search, so there's a Pro version, and basically the Pro version gets you different weights. I'll show you what I mean in a sec, let's get going, using for free. 

I'm going to search for fonts, I'm going to say, "bike", Sorry, I've already prepared. So I found a cool one, that's bike, I actually ignored these ones in here. I tried to find some ones, I just picked random, they were not good. Good icons, I'm picking you ones, bikes. The difference between Pro and paid, that is a free font, that is a paid font, you'd be like, "What's the difference?" They're just different weights, you can see, that one's got a nice thin one, that one's a thinner one, that one's kind of full up. So you got to decide, like, whether you can live with that, or whether you really want this one. 

So that's the difference, and then you see, the price isn't huge, it's a subscription, You get a lot more icons, all the grayed out ones are the ones you can't use, but there is a free version of them. Now to use them, click on one. This page loads, seems to change color every time I reload this page. It's pink at the moment, yours will be different. So what we need is the stuff along the top here, mainly. Actually there's a-- it's kind of showing me some cool stuff. I can see it as a solid color, it's white on black, different sizes, all very cool. So let's start using this icon. 

There's two parts we need, we need this part, and we need-- where is it? Don't have a project setup, it's a little bit hidden. Click on-- let's do this bit first, so get started here. Basically this is the CDN, it's a Content Delivery Network. It's exactly the same as we did for Google Fonts. What we need to do is copy it, and go into our code. Put it here, or put it just underneath. What it really needs to do is just be underneath the style.css 

Doesn't really matter which way Google Fonts and this Font Awesome goes, but it just needs to be in the top there. Next thing I need to do, is I'm going to go back. So once that's in, you need to do that once per page. So that needs to be on every page that you have an icon on. It doesn't need pages that don't use icons. So it doesn't need to be on every page, but often you just throw them on there all. So what we need is this thing here. This bit of code, this goes into our HTML, I'm going to copy it. Doesn't really matter if you get it from there, or from here, same thing. Copy it, and let's go into our code and put it where you want it. 

So I'm going to get rid of that image icon, I'm going to paste it here. I'm going to line it up nicely, hit 'Save', and we're going to see how it works. There you are there, here's my teeny tiny icon. So by default it's very small, actually it's the-- the weird thing is, you've got to think of this as a font, which is really hard to do. You're like, "I want to size this, I'm going to make it a width of 100 pixels." It won't work. You need to make it a font size of 100 pixels, because it's a font that's why it's so small, yours might be bigger, because it's using whatever the default size is. Remember, ours is 16. What did we change our default to? I think it's 18 pixels. Whatever it was, it's the default font size. 

So to go and style this, let's have a look at our HTML. So we can style this. We have an I-tag, that's what's used for icon. Remember, P for paragraph, H2 for heading2, I is used for icons. And it's got a couple of Classes applied to it. We'll talk about it in a second, so you can target any of these. Because I only have one group of icons on this whole page. they're just one, two, three, I'm just going to target all of the icons. You might have to be a little bit more specific. So I'm going to say, all the icons have a font size of, I'm going to use 100 pixels. 

Why am I using pixels even though we did rems earlier? Mainly because, if I have a look, there is no-- it's not going to help the visually impaired, if this gets bigger and smaller, it's not going to make it more readable. It's a picture of a really stylized simple motorbike. You might argue that it does need to get bigger and smaller, Maybe you're using it a smaller size, so it could really be rems, or you're using it inline with text, say it gets to the end, you're using this little motorbike at the end of a sentence, then it would be a good idea to be a rem, and that's how to start using them. 

So the cool thing about them, we'll do a little bit more detail, but basically you-- yeah it's loading a font that happens to be instead of letters, they are icons, there are loads to pick from Font Awesome. And it means that they're scalable as well, like vector. You know we talked about being-- where's all my stuff? We talked about being scalable. If I zoom in on this, you'll see my motorbike gets scaled, like an SVG, but it's loaded as a font, and if somebody's been to a site that uses Font Awesome, which loads of site do use, it means when they get to your site, they might-- it might just load even faster because they're already pre-loaded, but if you're thinking, "Hey, why don't we just load it as an image?," seems like a easier thing to do, rather than calling the CDN at the top, and in all honesty that's what I do. 

I show you this because you're going to find sites with this in, and this little I-tag implemented. The reason I wouldn't do it this way, is because the first thing I want to do is, download the motorcycle from Font Awesome as an SVG. I think you can download it from here as SVG. Where is it? Here it is, at the top here. 'Download SVG', I agree and download, and you'll get just a regular old graphic because what I want to do is, download it, open it up in Illustrator, start messing about with it, and changing it. So there's no right or wrong way of doing that but we've learned how to do it. 

Let's go into a tiny bit more detail. Let's look at the structure of it. So FAS, so it's given itself two classes, well, it suggested to. FAS and FA-Motorcycles. FAS is Font Awesome, so it's written twice there. Font Awesome, this is a solid version, there is a regular version and a lite version. So if I'd paid for this, I could get the FAR version or the FAL version. And the thing is, I don't have to go off and change it. I don't have to kind of use the website to do it, I can go in here and say, actually I've paid for it now, and I'm using--

 They'll give you a different CDN at the top here for the paid ones, and you can go in here and change it to R or light, but we're using the solid version for free. This other bit here, the FA, so it's Font Awesome, and motorcycle, it's very clear what that does. Let's go and have a look. I'm going to add it to these two other-- I'm doing it badly. Two other cards. There we go. Man, having a bad morning, come on, you can do it.

Now what we can do is go through and say, actually I want, I was looking for a cog. Which one is going to be the cog? And what have we got? We've got Service Types, Call for Advice. So we'll do Service, would be cogs. I found some cogs, and I like this one, and instead of having to copy and paste the code, I can just say, look at this, FA cog. So that's what's written there, I'm just going to go over here, I'm going to say, "You are a cog." I'm guessing this, I'm totally guessing phone, I haven't prepared this one. Did it work? Did I save it? Save. Hey look, there was a phone. You can hope for the best and try and guess it, because they're pretty well named. 

What did I actually pick? Ha, I did use phone. My prepared example, he's in here. Not so clever, Dan. So that's how to use them and how to implement them. If you need to color them, how would you color them? Have a think, stop, pause, pause the video, have a think. Did you pause? What do you think? I'd do it this way. Remember, it is just a regular old font. So you'd style it using all the things you can for fonts. So we'd have now, blue ones, yay. The only reason mine are white is because I, up in my Head tag up here, said, all fonts that are in the Body tag are white, unless I say otherwise. So that's why it's coming through white. I don't need to say it again here. 

That little color box, I kind of ignored him, right? I've got used to him, you're probably not, you're like, you start deleting stuff, and that little white box is kind of like, "Go away." It just is there for a little while and disappears. If you find it annoying, so why? Knowing colored box that doesn't seem to-- gets in the way, the cursor, it's cool, but it's also a pain. 

Another thing I just want to kind of briefly mention, is that Font Awesome is one option, and it might not be in the future, you might go through, and there might be this other really thing. It might be something more awesome, awesomer Font Awesome. Another one that's quite common is Material. So material.io is, it is more than just icons. Font Awesome is just fonts, well, icons, and Material is a lot of things. We've talked about it in other courses like our UI/UX course, but it has really good icons as well. 

So if you go to material.io, and go through and have a look at, Tools? I'm trying to guess where it is. I normally just Google 'material io icons', there it is there, proper. This will change as well, I bet you, by the time you get over here, but if you Google 'material icons' feeling that, here, or something that looks reasonably like this. Why would I use this over Font Awesome? This one here is really-- you'd use this for a lot more kind of, like if I was doing a bank's website or an app for, something accounting-wise, something that needs more institutional icons, there is a lot more institutional icons here, plus, Font Awesome is fun, but some of the icons are a little bit ambiguous, whereas this Material design seems, it tends to kind of have a bit more. 

They match all the stuff being used in Android application. So often these icons are being taught to the world, via Google's apps. Gmail, Chrome, it's kind of a universal thing that Google uses. So it's quite useful, it's free to use. There's no paid version of this, but there's not as many, like weird fonts. You're not going to find, a dig or-- would there be an Instagram icon? I doubt there is. So it's really kind of, there's probably an Instagram one, but there's not going to be a clown on a motorbike, whereas it's probably a clown and a motorbike in Font Awesome.
 
Over here you can do similar to what you did in Font Awesome. There's different styles, so there's a Filled version, you can see it there. I'll scroll up. So Filled is a rounded version, which doesn't look too much different. Two-Tone, ooh, sharp version, so you can pick one of these. Do a search at the top here. So say I need a picture of a cog. It's not going to have one. Nope, no cogs, but there is wallet. That is not a wallet. It's credit card, cool. So I click on it, and it's a very similar type of thing. You can either download it as an SVG over here. So you can say, SVG please, download, or you can click on that little arrow here, see this little chevron? And you can embed it. 

So you need to do two things, Go to the instructions, it will open up, kind of a 'How to do it," and you just scroll, scroll, scroll, because you're like, "I'm hardcore, I don't need all this stuff, I just need you." So just grab it. So it's the same kind of Google Fonts as we did before, but the font family is Material icons. So copy that, stick it in the head of your document. So up here, you could probably combine it with this one. Yes, you definitely could, or you could have it separate, doesn't matter. Load twice. Then you paste the HTML in just like we did before. So there it is there. So that's just two of them, there are lots of different options, but two of the most popular ones at the moment. 

All right, enough about icons and fonts. Yeah, let's get onto the next video, Dan. Hurry up. Hold up, hold up, hold up, look at the icons there, they're touching the top. Can't leave them like that, so we're going to go through now, and just push some Padding on, it's not very fun or exciting. How we're going to do it? I plan to do it with my-- oh, how do we have to do it? I might do it to-- if I do it to the card, if I say, card, I want some Padding in there, I have to do it one, two, three times, because we've got Card1, 2, and 3. So I'm going to do it the icon. I'm only doing it to this because I have the luxury of only having those Is or the icons once on a page, and that's all I'm using it for. 

If you're using a very icon-heavy site, this seems like a really bad idea, because then, later on in your website design, you'd be like, "Oh, I'm going to add icon", and it will be the shoot padding on it. So we're going to do, what we might do is, Padding Top, and we will say, the Padding at the top of this, I have no idea. Pixels. Let's have a little look. You go there, nope, too much, 30. Yeah, I'm there, I'm there, cool. 

One thing we might do though is, there's no harm in now making a Compound Selector, So I want I-tags, but only if they're inside a card. It's going to do the same thing, it's going to work, but later on, if you use the icon outside of these cards, this is not going to apply. So you might just be future proofing yourself, and that's the kind of things I think about, when I'm like, "Hmm, that's a really easy thing, that works right now?,” that's going to cause me a big old headache later on. All right, now this is the end, I will see you in the next video.