1
00:00:08,180 --> 00:00:10,485
In an earlier lesson,

2
00:00:10,485 --> 00:00:13,830
you learned how to include images into your web page.

3
00:00:13,830 --> 00:00:16,590
Sometimes though, people aren't really sure where to

4
00:00:16,590 --> 00:00:19,590
find images or they're not very good artists themselves.

5
00:00:19,590 --> 00:00:22,950
So today, I want to talk about using Font Awesome.

6
00:00:22,950 --> 00:00:26,520
Font Awesome is a collection of icons that you can use for

7
00:00:26,520 --> 00:00:30,045
your page and they're pretty much worldwide recognizable.

8
00:00:30,045 --> 00:00:32,475
Here I am at the Font Awesome page.

9
00:00:32,475 --> 00:00:34,095
I want to show you how to use it.

10
00:00:34,095 --> 00:00:39,100
First thing I'm going to do is go to the icons selection.

11
00:00:53,150 --> 00:00:58,450
As you can see, there are thousands of different icons that you can choose

12
00:00:58,450 --> 00:01:03,310
from to help decorate your page and it's very simple for you to use.

13
00:01:03,310 --> 00:01:06,535
The first step is that you need to tell your web page,

14
00:01:06,535 --> 00:01:09,085
hey, I want to use Font Awesome.

15
00:01:09,085 --> 00:01:13,175
In the getting started section of Font Awesome, they give you the code.

16
00:01:13,175 --> 00:01:15,590
So let me show you what it looks like.

17
00:01:24,410 --> 00:01:27,465
Here I am with a simple file.

18
00:01:27,465 --> 00:01:32,450
The only thing that's going to look new to you is that I have two unique ideas.

19
00:01:32,450 --> 00:01:36,605
The first is that I have a link in the head section of my page.

20
00:01:36,605 --> 00:01:39,125
Remember, the head is where we keep

21
00:01:39,125 --> 00:01:43,400
all that extra information that isn't always seen by the user,

22
00:01:43,400 --> 00:01:47,960
and what I've done here is I've connected to the Font Awesome CDN.

23
00:01:47,960 --> 00:01:53,075
It's a very intimidating acronym that just means Content Delivery Network.

24
00:01:53,075 --> 00:01:55,700
You're basically making an agreement where, hey,

25
00:01:55,700 --> 00:01:58,230
I'm going to link and use your stuff but I'm going to use

26
00:01:58,230 --> 00:02:01,730
this special link so you know how many people are using it.

27
00:02:01,730 --> 00:02:04,850
If we travel down into the body section,

28
00:02:04,850 --> 00:02:07,040
that's when you're going to see a new tag,

29
00:02:07,040 --> 00:02:09,965
the i tag, it stands for icon.

30
00:02:09,965 --> 00:02:11,980
Do you remember the image tag?

31
00:02:11,980 --> 00:02:16,840
One of the things you need to have if you're going to use the image tag is the source,

32
00:02:16,840 --> 00:02:19,050
what picture it is you want to use.

33
00:02:19,050 --> 00:02:22,945
With Font Awesome, you have to include a class tag,

34
00:02:22,945 --> 00:02:24,565
and in that class tag,

35
00:02:24,565 --> 00:02:27,485
you're going to tell it which picture you want to use.

36
00:02:27,485 --> 00:02:28,760
So in this case,

37
00:02:28,760 --> 00:02:32,075
I'm using the one called fa-angry.

38
00:02:32,075 --> 00:02:35,880
Let's go ahead and see what this page looks like.

39
00:02:48,950 --> 00:02:54,290
Well, we ended up with an angry little person staring at us.

40
00:02:54,290 --> 00:02:56,795
It actually is really straightforward.

41
00:02:56,795 --> 00:03:00,550
You get a very little icon each time you include this tag.

42
00:03:00,550 --> 00:03:02,235
Now, in all honesty,

43
00:03:02,235 --> 00:03:06,360
my screen is blown up really big so if you were to run this code,

44
00:03:06,360 --> 00:03:08,310
the icon would be really small.

45
00:03:08,310 --> 00:03:13,205
So, let me show you some of the options you can do to adjust the size of your icon.

46
00:03:13,205 --> 00:03:17,370
So what I've done is I've gone in and copied that line of

47
00:03:17,370 --> 00:03:21,110
code a couple of times and in each one,

48
00:03:21,110 --> 00:03:26,150
I added one extra attribute and that's the size that I want the icon to be.

49
00:03:26,150 --> 00:03:33,755
So right here, I said make that icon extra small and then I did medium and large.

50
00:03:33,755 --> 00:03:36,930
The 2x, 3x, 5x,

51
00:03:36,930 --> 00:03:41,015
10x, etc, that's just making it that much bigger each time.

52
00:03:41,015 --> 00:03:43,355
So now, if I look at the page again,

53
00:03:43,355 --> 00:03:46,380
it's definitely going to look a little bit different.

54
00:03:50,720 --> 00:03:53,680
In fact, it's way too big for the screen so let

55
00:03:53,680 --> 00:03:55,880
me make it a little bit smaller, and there you have it.

56
00:03:55,880 --> 00:03:59,465
We have the icons with different sizes.

57
00:03:59,465 --> 00:04:02,405
Angry face clearly isn't the only one you can do.

58
00:04:02,405 --> 00:04:11,305
Some of the more popular ones you might see include the address card.

59
00:04:11,305 --> 00:04:18,735
So I'm going to copy it. It always starts off as the i tag with the class, equals,

60
00:04:18,735 --> 00:04:22,575
you need to have fas for Font Awesome,

61
00:04:22,575 --> 00:04:24,120
and then instead of angry,

62
00:04:24,120 --> 00:04:27,220
let's go ahead and try an address card.

63
00:04:28,790 --> 00:04:32,295
This one hopefully will look kind of familiar to you.

64
00:04:32,295 --> 00:04:37,640
I'm going to put a line break in just to mix things up a little bit there.

65
00:04:37,640 --> 00:04:40,920
Now, when I refresh the page,

66
00:04:43,480 --> 00:04:47,465
you can see a very familiar little address card.

67
00:04:47,465 --> 00:04:51,230
Icons are great because they give your page this kind of

68
00:04:51,230 --> 00:04:55,320
really familiar look that people make it think it looks really professional.

69
00:04:55,320 --> 00:04:59,645
But there are some downsides to using icons if you're not careful.

70
00:04:59,645 --> 00:05:03,580
The most important being that they're not necessarily accessible by default.

71
00:05:03,580 --> 00:05:07,010
So if you were to turn a screen reader on this page,

72
00:05:07,010 --> 00:05:10,075
it would actually show up as if there's no content at all.

73
00:05:10,075 --> 00:05:14,840
Or even worse, sometimes people use icons for social media links.

74
00:05:14,840 --> 00:05:18,435
So let me show you one more example before we're done with Font Awesome.

75
00:05:18,435 --> 00:05:23,240
So what I've done here is instead of just using these icons as decoration,

76
00:05:23,240 --> 00:05:25,310
I've actually put them into my site

77
00:05:25,310 --> 00:05:28,475
so that if I wanted to say link to my Twitter account,

78
00:05:28,475 --> 00:05:32,315
right down here, I would include the Twitter icon.

79
00:05:32,315 --> 00:05:34,580
If I want to connect to Pinterest,

80
00:05:34,580 --> 00:05:37,000
I could use this Pinterest icon right there,

81
00:05:37,000 --> 00:05:41,890
and LinkedIn, and it actually looks really good. Let me show you.

82
00:05:47,000 --> 00:05:51,770
Here we go, I've got each of my links.

83
00:05:51,770 --> 00:05:54,760
Just so you know, the reason these icons are blue is,

84
00:05:54,760 --> 00:05:56,345
again, because they're links,

85
00:05:56,345 --> 00:06:00,050
and on each one, I could click on it and it would take me to my account.

86
00:06:00,050 --> 00:06:01,760
Here's the problem.

87
00:06:01,760 --> 00:06:03,900
It looks great but I'm going to run

88
00:06:03,900 --> 00:06:08,090
a quick Wave validator check on it to see if my code is semantically correct.

89
00:06:08,090 --> 00:06:11,520
So I'm going to go to my hosted version.

90
00:06:16,120 --> 00:06:24,060
Is it here? Let me find it.

91
00:06:43,100 --> 00:06:47,989
So I'm not using the code I was just using because in order to validate,

92
00:06:47,989 --> 00:06:50,270
I want to go ahead and put it on the server.

93
00:06:50,270 --> 00:06:54,835
So I'm going to go up and I'm going to click on my Wave validation tool,

94
00:06:54,835 --> 00:06:58,235
and wave is going to go through and give me three errors.

95
00:06:58,235 --> 00:06:59,555
Not just any three errors,

96
00:06:59,555 --> 00:07:01,580
but three very important errors,

97
00:07:01,580 --> 00:07:03,200
and that is simply that,

98
00:07:03,200 --> 00:07:08,780
hey, you have three links and they don't actually have any text.

99
00:07:08,780 --> 00:07:10,700
Someone who's using a screen reader would have

100
00:07:10,700 --> 00:07:13,670
no idea where this link is supposed to go to.

101
00:07:13,670 --> 00:07:17,195
It doesn't know that this is Twitter or Pinterest or LinkedIn.

102
00:07:17,195 --> 00:07:21,270
But I have a really simple quick fix for that.

103
00:07:30,190 --> 00:07:34,310
I'm going to use something called an aria label either in

104
00:07:34,310 --> 00:07:37,745
my a tag or actually in the icon tag as well.

105
00:07:37,745 --> 00:07:41,435
I simply put aria-label equals,

106
00:07:41,435 --> 00:07:44,270
and in this case, I'm going to put Twitter.

107
00:07:44,270 --> 00:07:53,410
On the next one, I can add aria-label equals Pinterest, etc.

108
00:07:53,410 --> 00:07:56,125
By adding in these aria labels,

109
00:07:56,125 --> 00:07:59,390
you're basically giving screen readers the ability to

110
00:07:59,390 --> 00:08:03,260
tell somebody where this link is going to go to read a label,

111
00:08:03,260 --> 00:08:05,810
and this is huge in terms of accessibility.

112
00:08:05,810 --> 00:08:08,945
So I hope you have fun using Font Awesome.

113
00:08:08,945 --> 00:08:11,210
There are so many different ones you can choose from

114
00:08:11,210 --> 00:08:14,450
but if you're going to play with some of these cool tricks,

115
00:08:14,450 --> 00:08:19,500
make sure that you're making them accessible to as many people as possible.