Skip to main content

Icons via Font Awesome

Lesson 51 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

Icons via Font Awesome

Lesson 51 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

51. Icons via Font Awesome

Lessons

Class Trailer

Getting Started

1

How This Class is Structured

01:41
2

What to Download

02:57

Introduction to HTML & CSS

3

Creating Our First Webpage

05:55
4

What is HTML5 & CSS3

08:24
5

Head vs. Body vs. Html Tag

09:01
6

Title & Description

05:54
7

What Code Editor Should I Use

02:42
8

Using Diy Tags

06:26
9

What is a CSS Class

09:05
10

How to Create Nested Divs

05:03
11

Class Project

05:24
12

External CSS

09:07
13

Creating Our Index Style Pages

12:16

Project 1: Restaurant Website

14

Testing Your Website

08:47
15

Check Your Code For Errors

11:01
16

What are HTML5 Structure Tags

05:47
17

Add HTML5 structure elements

16:02
18

How to Set the Color of the Background

05:10
19

Adding Images to a Website

04:38
20

How to Center an Image

01:14
21

Change the Font Size & Color

14:11
22

Make a Clickable Link

08:45
23

Stretching Background Image

05:38
24

Making a Div Tag Transparent

02:36
25

Simple Website Text Navigation

06:43
26

CSS Compound Classes

07:02
27

Class Project 02

02:05
28

Class Project 02 - COMPLETE

04:48
29

Add an Email Button to a Website

03:49
30

Add Google Maps to Your Website

11:25
31

Making a Website Live

16:50
32

Uploading via SFTP

11:50
33

Setting Up Our New Project

03:46

Project 2: Bike Repair Website

34

CSS Reset

15:22
35

Min-height vs. Height

07:01
36

Div Tags Onto One Line

05:23
37

Getting div tags onto one line using Flexbox in HTML & CSS

05:23
38

Evenly Spaced Div Tags

04:42
39

Two Div Tags of Different Sizes

07:13
40

Vertically Center Content

07:20
41

Class Project 3

02:51
42

Class Project 3 - COMPLETE

05:39
43

Change Default Fonts

04:19
44

Installing Google Fonts

12:44
45

What are PX & EM & REM

14:56
46

Change Line Height

04:33
47

SVG vs. JPG vs. PNG

07:04
48

How to Create a SVG, JPG, or PNG

11:00
49

Block Images vs. Background Images

08:32
50

Finishing Up Our Cards

09:10
51

Icons via Font Awesome

16:31
52

Making a Div Container Clickable

09:55
53

Box-sizing & Border-box

06:19
54

How to Make A Colored Button

07:46
55

Why Can't I Add Margin or Paddding

11:08
56

Rounded Corners

04:17
57

Drop Shadows

06:24
58

Backup Your Website

05:00
59

Reusing a Button Class

03:10
60

Class Project 04

02:58
61

Class Project 04 -COMPLETE

05:45
62

Adding a Horizontal Rule

03:51
63

Make Divs Wrap Onto Separate Lines

12:14
64

Hover Color & Animating a Button

03:33
65

Pseudo Classes

09:31
66

Simple Dropdown Navigation

20:04
67

Adding Our Dropdown to the Website

14:50
68

Useful Shortcuts and Tips in VS Code

13:28
69

Large Background Image

09:24
70

How to Connect 2 Pages

10:42
71

Simple PHP Form Work

17:49
72

Placeholder Form Text

05:46
73

Form Check Marks

03:04
74

Multi Line Form Text Box

02:18
75

Form Radio Button

06:07
76

Form Drop Down Menu

05:48
77

How to Style Your Form

12:55

Project 3: Responsive Portfolio Website

78

What does responsive website design mean

04:17
79

How to change a website layout size color when at different sizes using media queries

11:28
80

How to test your website on a tablet or mobile phone from Visual Studio Code

06:00
81

How to change the layout of a responsive website for mobile vs desktop

16:02
82

How to turn things on and off for mobile tablet & desktop responsive websites

06:03
83

What is pixel density responsive images pixel ratio dp px in webdesign

14:47
84

How to export responsive images for website from XD Photoshop Illustrator

05:11
85

How to add responsive images to website using 100% width in HTML & CSS

06:08
86

How to use srcset to change images in HTML for responsive website

11:18
87

How to add a css style to the first line of a p tag on a website (

11:18
88

How to make the header footer full width but the inside centered

05:36
89

Class Project 05 – Header design

03:12
90

Class Project 05 – Header design COMPLETE

06:25
91

How to use a span tag or span class in HTML to change text

10:32
92

How to pin the navigation to the top of a website fixed nav

03:17
93

How to make a simple responsive mobile menu using CSS only

08:21
94

What is Javascript vs Jquery in website web design

06:35
95

How to make a burger menu 3 line mobile navigation for a website

15:11
96

How to switch a menu nav from desktop to mobile phone

21:45

Project 4: Bootstrap Yogurt Website

97

Overview of what Bootstrap 4 is in website design

07:57
98

How to install Bootstrap 4 on a website using Visual Studio Code

06:27
99

Quick overview of how the Bootstrap Grid Layout works in VS Code

10:49
100

Quick overview of how Bootstrap Components works in VS Code

09:23
101

Quick overview of how Bootstrap CSS Styles works in VS Code

08:20
102

How to customize the default Bootstrap 4 css styles

13:51
103

How to use Bootstrap Layout Grid Experiment 1

10:20
104

How to make 100% header & uneven widths in Bootstrap 4

07:16
105

How to create uneven col widths in Bootstrap 4

07:27
106

How to add padding & margins using Bootstrap 4 in VS Code

12:03
107

How to change layout of Bootstrap depending on mobile or desktop

15:46
108

How to turn things on & off on your website using Bootstrap 4

05:30
109

Google Chrome Inspect

12:40
110

Add Shadows to Text & Boxes

07:06
111

Change the Default Buttons

06:16
112

Responsive Images in Bootstrap 4

09:34
113

How to Center Text & Div Tags

04:16
114

Customize the Bootstrap Navbar

07:29
115

Add Your Own Logo

03:58
116

Change the Default Nav Styles

12:12
117

Fix the Navigation to the Top

04:41
118

Col Images & Col Background

07:56
119

Bootstrap Border & Rounded Corners

04:20
120

Bootstrap 4 Carousels

05:13
121

Card Groups

03:29
122

Drop Shadows On Bootstrap Cards

02:25
123

Clickable Boxes in Bootstrap 4

04:02

Final Quiz

124

Final Quiz

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

Class Materials

Bonus Materials with Purchase

Exercise Files
Completed Files

RELATED ARTICLES

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

RELATED ARTICLES

Recent

Articles