In an earlier lesson,
you learned how to include images into your web page.
Sometimes though, people aren't really sure where to
find images or they're not very good artists themselves.
So today, I want to talk about using Font Awesome.
Font Awesome is a collection of icons that you can use for
your page and they're pretty much worldwide recognizable.
Here I am at the Font Awesome page.
I want to show you how to use it.
First thing I'm going to do is go to the icons selection.
As you can see, there are thousands of different icons that you can choose
from to help decorate your page and it's very simple for you to use.
The first step is that you need to tell your web page,
hey, I want to use Font Awesome.
In the getting started section of Font Awesome, they give you the code.
So let me show you what it looks like.
Here I am with a simple file.
The only thing that's going to look new to you is that I have two unique ideas.
The first is that I have a link in the head section of my page.
Remember, the head is where we keep
all that extra information that isn't always seen by the user,
and what I've done here is I've connected to the Font Awesome CDN.
It's a very intimidating acronym that just means Content Delivery Network.
You're basically making an agreement where, hey,
I'm going to link and use your stuff but I'm going to use
this special link so you know how many people are using it.
If we travel down into the body section,
that's when you're going to see a new tag,
the i tag, it stands for icon.
Do you remember the image tag?
One of the things you need to have if you're going to use the image tag is the source,
what picture it is you want to use.
With Font Awesome, you have to include a class tag,
and in that class tag,
you're going to tell it which picture you want to use.
So in this case,
I'm using the one called fa-angry.
Let's go ahead and see what this page looks like.
Well, we ended up with an angry little person staring at us.
It actually is really straightforward.
You get a very little icon each time you include this tag.
Now, in all honesty,
my screen is blown up really big so if you were to run this code,
the icon would be really small.
So, let me show you some of the options you can do to adjust the size of your icon.
So what I've done is I've gone in and copied that line of
code a couple of times and in each one,
I added one extra attribute and that's the size that I want the icon to be.
So right here, I said make that icon extra small and then I did medium and large.
The 2x, 3x, 5x,
10x, etc, that's just making it that much bigger each time.
So now, if I look at the page again,
it's definitely going to look a little bit different.
In fact, it's way too big for the screen so let
me make it a little bit smaller, and there you have it.
We have the icons with different sizes.
Angry face clearly isn't the only one you can do.
Some of the more popular ones you might see include the address card.
So I'm going to copy it. It always starts off as the i tag with the class, equals,
you need to have fas for Font Awesome,
and then instead of angry,
let's go ahead and try an address card.
This one hopefully will look kind of familiar to you.
I'm going to put a line break in just to mix things up a little bit there.
Now, when I refresh the page,
you can see a very familiar little address card.
Icons are great because they give your page this kind of
really familiar look that people make it think it looks really professional.
But there are some downsides to using icons if you're not careful.
The most important being that they're not necessarily accessible by default.
So if you were to turn a screen reader on this page,
it would actually show up as if there's no content at all.
Or even worse, sometimes people use icons for social media links.
So let me show you one more example before we're done with Font Awesome.
So what I've done here is instead of just using these icons as decoration,
I've actually put them into my site
so that if I wanted to say link to my Twitter account,
right down here, I would include the Twitter icon.
If I want to connect to Pinterest,
I could use this Pinterest icon right there,
and LinkedIn, and it actually looks really good. Let me show you.
Here we go, I've got each of my links.
Just so you know, the reason these icons are blue is,
again, because they're links,
and on each one, I could click on it and it would take me to my account.
Here's the problem.
It looks great but I'm going to run
a quick Wave validator check on it to see if my code is semantically correct.
So I'm going to go to my hosted version.
Is it here? Let me find it.
So I'm not using the code I was just using because in order to validate,
I want to go ahead and put it on the server.
So I'm going to go up and I'm going to click on my Wave validation tool,
and wave is going to go through and give me three errors.
Not just any three errors,
but three very important errors,
and that is simply that,
hey, you have three links and they don't actually have any text.
Someone who's using a screen reader would have
no idea where this link is supposed to go to.
It doesn't know that this is Twitter or Pinterest or LinkedIn.
But I have a really simple quick fix for that.
I'm going to use something called an aria label either in
my a tag or actually in the icon tag as well.
I simply put aria-label equals,
and in this case, I'm going to put Twitter.
On the next one, I can add aria-label equals Pinterest, etc.
By adding in these aria labels,
you're basically giving screen readers the ability to
tell somebody where this link is going to go to read a label,
and this is huge in terms of accessibility.
So I hope you have fun using Font Awesome.
There are so many different ones you can choose from
but if you're going to play with some of these cool tricks,
make sure that you're making them accessible to as many people as possible.
