Lessons

Lesson Info

Icons via Font Awesome

Hi there, this video we are going to put in icons. Okay. 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. Okay. We're gonna 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 using things like PNG s or images for icons. Also note that at the end I have a full send 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. Alright, jumping down. Okay. So what would have we done in the past? We would have added an image. Okay. A PNG or SVG to our graphic. Okay. Or to our code. And then in my live view here. Okay, There is the icon here and that's that's loading a Jpeg or PNG or an S V G. So it's been downloaded. The...

y'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. And 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 the 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 an illustrator and change it and mess around with it. I'll show you that too. But let's use these fonts, icons that are really easy to use. So let's look at the two main players in this. Well, the main one is font awesome. Okay, font awesome works the same way as our google fonts. Remember earlier on in the course when we're like, I wish I had some great new fonts on my website, we added this bit of CSS cater, go to google fonts and we downloaded Playfair and Roboto. Okay, it's the same exact same principle here for using font awesome. Except the font that changed out the abc to bacon cake burger. Okay, so that's all that's really happening. So let's go and do it. Let's do a search. So there's a pro version and basically the pro version gets you different weights. So I'll show you what I mean in a second. Going using for free. Alright, I'm going to search for fonts. I'm going to say bike. I've already prepared. Okay, so I found a cool one that's a bike. Actually ignored these ones in here. I tried to find someone's. I just picked random. They were not good good icons on digging new ones, bikes. So the difference between pro and paid that is a free font. That is a paid font and be like, what's the difference? And there's 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've got to decide whether you can live with that or whether you really want this one. Okay, so that's the difference and you see the price isn't huge. It's a subscription. You get a lot more icons, all the grayed out ones, the ones you can't use. Okay, but there is a free version of them all Now to use them, click on one. This page loads seems to change color every time I reload this page, 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. Okay, I can see it as a solid color is 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? I don't have a project set up a little bit hidden, click on let's do this bit first, so get started here. Okay, and basically this is the CDN. Okay, it's a content delivery network. It's exactly the same as we did for google fonts. All we need to do is copy it. Okay and go into our code. Put it here, I'll put it just underneath, what it really needs to do is just be underneath your style dot CSS Okay. It doesn't really matter which way google fonts and this font awesome goes, but it just needs to be in the top there. Alright, next thing I need to do is I'm going to go back so once that's in, you only do that once per page. Okay, So that needs to be on every page that you have an icon on. It doesn't need the pages that don't use icons so it doesn't need to be on every page but often just throw them on the roll. So what we need is this thing here, this bit of code, this goes into our html. Okay. I'm gonna copy it doesn't really matter if you get it from there or from here. Okay. 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 hit so I'm gonna line it up nicely and hit save and we're gonna see how it works. Right? You are there is my teeny tiny icon. Cool. So by default it's very small. Okay. Actually it's the the weird thing is is you've got to think of this as a font, which is really hard to do. You're like, okay, I'm gonna 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. Okay. Because it's a fun. That's why it's so small. Yours might be bigger because it's using whatever the default sizes remember ours is 16. What do we change our default to? I think it's 2 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 eye tag is what's used for icon? Remember P for paragraph H two for heading to I as used for um icons. Okay. And it's got a couple of classes applied to it. We'll talk about in a second so you can target any of these because I only have one group of icons on this whole page. Okay. There's just 123. I'm just going to target all of the icons. You might have to be a little bit more specific. Okay, so I'm going to say all the icons have a font size Of, I'm gonna use 100 pixels. Why am I using pixels even though we did rings earlier? Mainly because I have a look. Okay. There is No it's not going to help the visually impaired if this gets bigger and smaller. Okay, it's not going to make it more readable. Okay. It's a picture of a really stylized simple motorbike. You might argue that it does need to get bigger and smaller. Okay, Maybe you're using it a smaller size so it could really be rings or you're using it in line with text. Okay. 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 ream 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 from font awesome. Okay. And it means that they're scalable as well. Like victor. You know, we talked about being where is all my stuff. Okay. We talked about being scalable. Okay, if I zoom in on this, you'll see my motorbike gets scaled okay. Like an SVG, but it's loaded as a font and if somebody's been to a site that uses font awesome, Okay, Which loads of sites to use it? It means when they get to your site and they might, it might just load even faster because they're already preloaded. But if you're thinking, hey, why don't we just load it as an image. Seems like an easier thing to do rather than calling the CDN at the top and in all honesty. That's what I do. Okay, I'll show you this because you're going to find sites with this in and this little I tag implemented and the, the reason I wouldn't do it this way is because the first thing I want to do is download the motorcycle. Okay, from font awesome as an SVG. Okay. And I think you can download it from here from SVG. Where is it? Here? It is at the top here, download SVG. Okay. I agree and download and you'll get just a regular old graphic because what I want to do is download it, open it, open illustrator and then start messing about with it and changing it. Okay, So there's no right or wrong way of doing that. Okay, 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 F A S so it's given itself to classes. So well, it's suggested to F A S and F a motorcycle. So F A s is fond awesome. So it's written twice their font awesome. This is a solid version. There is a regular version and a light version. So if I had paid for this. Okay, I could get the F A our version or the F A L version. And the thing is I don't have to go off and change it. You know, 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 our okay or light or Okay, but we're using solid version for free. This other bit here. The FAA So this font awesome and motorcycle. It's very clear what that does. Okay, let's go and have a look. So I'm going to add it to these two other um mm I'm gonna do it badly. Two other cards. There we go, man, having a bad bad morning, come on, you can do it. Alright, so now what we can do is go through and say actually I want I was looking for a cog okay, which one is going to be the cog? And what do we got? We've got service type score provides so we'll do service will be cogs. Okay, so I found some cogs and I like this one and instead of having a copy and paste the code, I can just see look at this if a cog. Okay, so that's what's written there and I'm just gonna go over here, I'm going to say you are a cog and I'm guessing this, I'm totally guessing phone, I haven't prepared this one. Did it work that I save it save. Hey look there was a phone Okay, you can hope for the best and try and get it because they're pretty well named. What did I actually pick ha I did use the phone, my prepared example. You're not so clever then. Alright, 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. Okay, so you style it okay using all the things you can for fonts. So we'd have now blue ones and the only reason minor 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 your 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 do I annoying colored box that doesn't seem to get in the way the curse. So it's cool. But it's also a pain. Now, 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 thinking it might be, there might be something more awesome. Okay, awesome. Font awesome. And another one that's quite common as material. Okay, so material to Io is it is more than just icons. Okay, font awesome is just fonts, 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 to IO and go through and have a look at tools, I'm trying to guess where it is. I normally just google material I O icons there. It is. They're popular. This will change as well. I bet you by the time you get here, but if you google material icons, you'll end up 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 tends to kind of have a bit more, they match all the stuff being used in android applications. So often these icons are being taught to the world via google's apps. Okay. Gmail chrome that it's kind of a universal thing that google uses. So it's quite useful. It's free to use um 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 um will there be an instagram icon? I doubt there is. Okay so it's really kind of there's probably an instagram mom but there's there's not going to be a clown on a motorbike whereas there's probably a clown on a motorbike in font awesome over here. You can do similar to what you did in um find awesome. There's different styles. So there's a field version you can see it there. I'll scroll up. Okay, so filled there's a rounded version which doesn't look too much different. Two tone sharp version. Okay so you can pick one of these, do a search at the top here. Okay so say I need a picture of A and Cog, it's not going to have one nope, no cogs but there is a wallet, there is not a wallet, there's credit card. Cool so I click on it and it's a very similar type of thing. Okay you can either download it as an SVG over here. Okay so you can see S V. G. Please download. Okay. Already download away and or you can click on that little arrow here. The littlest everyone. Okay and you can embed it so you need to do two things, go to the instructions. Okay it'll open up kind of 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. Okay, so just grab it. Okay, 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. Okay, you can probably combine it with this one. Okay? Yes, you definitely could or you could have a separate doesn't matter, load twice and then you paste the html in just like we did before. So there it is there you. Alright, so that's just two of them. There are lots of different options. Okay, but the most popular ones at the moment. Alright. It's enough about icons and fonts. Yeah, let's get on to the next video dan, hurry up. Alright, hold up, hold up, hold up, look at the icons, they're they're touching the top, we can't leave them like that. So we're going to go through now and just and put some petting on. It's not very fun or exciting. How are we going to do it? I plan to do it with my what do we have to do it? I might do it too if I do it to the card. Okay. If I say card, I want some padding in there, I have to do it times. Okay, because we've got a card, 12 and three. So I'm going to do it to the icon. I'm only doing it to this because I have the luxury of only having those eyes. Okay. Or the icons once on a page. Okay. And that's all I'm using for. If you're using a very icon heavy sight, this seems like this feels like a really bad idea because then you will later on in your website design, you'll be like, oh I'm going to add icon and it will be the shoot padding on it. Okay. So we're going to do what we might do is petting top. Okay. And we will say depending on the top of this, I have no idea pixels. Let's have a little look. You got the too much 30. Alright. Yeah, I'm there. I'm there. Cool. And one thing we might do though is there's no harm in now saying making a compound selector. So I want I tags but only if they're inside a card, I shouldn't have used cards. Okay. And 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. Okay. 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