Font Awesome Icons

[00:00:00]
>> Let's move on to some accessible icons. We're going to work with something called Font Awesome and I imagine many of you have heard of font awesome before fontawesome.com. Now the reason I'm using Font Awesome here is because Font Awesome is a free or potentially part free part paid font library that offers a ton of icons that are available to you.

[00:00:27]
So if you were to go to fontawesome.com Click on Start for Free. Let's see here or icons, I guess I should say, up at the top navigation. If you click on the icons, it will tell you that there are 7864 icons today, not all of them are free.

[00:00:45]
If you click on Free over here in the left navigation only 1608 icons are free today and this is Font Awesome five. As of this recording, there is about to be a release for Font Awesome 6, but we're gonna work with Font Awesome 5 today. The reason we're gonna use a font for doing this is just to again because this is an introductory CSS course, we're gonna try to make things simple when working with icons.

[00:01:11]
Many professionals will tell you that they prefer to work with an actual SVG, a Scalable Vector Graphic, which will give you the Math for drawing these types of icons and incorporate those SVGs into their document. I prefer to use Font Awesome when I'm teaching a course like this because with a single installation, we have access to 1608 icons, and so it's easy to make changes and swap things in and out.

[00:01:39]
You may also like it for prototyping for that reason. Once you have defined exactly what icons you want to use, you could always go back later and swap those out for the actual SVG Code instead. The reason people like SVG better than the font itself, the fonts file size is much larger than the individual SVGs.

[00:02:00]
It's rare that you're going to use this entire icon set inside of your website. So why load all of that stuff in, if you're only gonna use a handful of icons in the first? But for our purposes this is perfect. Let's go through swapping out the LinkedIn icon then I'm going to let you guys swap out the GitHub icon and add an icon for yourself for whatever it is that you want to do.

[00:02:27]
So we are here this was at Part 3 Adding Accessible Icon. So I'm gonna walk you through adding the LinkedIn icon now So we'll start here inside of Font Awesome and we are looking for an icon for LinkedIn. So in the search box, all we have to do is type in LinkedIn, and as it turns out, there are two options here.

[00:02:49]
I prefer the one with the box. If you like the other one, that's okay too. When you click on that particular icon it's going to give you notice here, it will give you the option of downloading, that's this download icon here. You could download the SVG from here.

[00:03:07]
It'll also give you the HTML that will call that particular icon. It will give you the Unicode option that's useful in some environments. I've used that when working in Web Flow, for example and or you can copy the Unicode glyph. We're gonna copy this HTML right here, click that.

[00:03:30]
And then inside of our code pane in our HTML, we'll scroll on back here to our LlinkedIn and I am going to drop in inside of the link itself Right there, I'm going to paste in that particular code. And I think I'm just going to reformat this a little bit just so you can read it a little bit better there on the screen.

[00:04:01]
So we've got an li, we've got our a link right and then we have this code that we just copied in from Font Awesome and nothing is happening why is that? We haven't loaded the font. So, let's load the font. We're gonna go to our settings, we're gonna go to our CSS, and scroll on down here to external style sheets and pens.

[00:04:25]
One of the things that's great about CodePen is it already has Font Awesome, accessible for you. So, if in the search box here at the top we start to type in Font Awesome. It'll give you in this case version 5.15.4. That's the most recent version at the moment.

[00:04:42]
Click that it'll add that line of code right here and we can say Save and Close. And you'll see here now inside of our link, we have our LinkedIn icon in addition to the LinkedIn works. So that's pretty awesome. So we're gonna make a couple of tweaks though to the code that Font Awesome gives us and it has given me an I here and I guess it's doing this because I is icon.

[00:05:08]
Nothing could be further from the truth. The I element dates from very early on on the web back before, we had a lot of support for CSS, and if we wanted to make things bold we used B and if we wanted to make things italic we used I.

[00:05:27]
Obviously, CSS came along and we switched over to more semantic elements is strong and M, but B and I have made a comeback in HTML five. They mean all they mean completely different things that have nothing to do with bolded and talic. All right, and they don't mean icon either.

[00:05:44]
So I don't particularly like this markup. I prefer to use it with span, which is a better choice. So I always change this, to span when I work with this if you want to leave it as I, it's certainly fine to do a lot of people do that.

[00:06:05]
And then the other thing now that happens in terms of accessibility, you want to hide the icon from the screen readers, but you want your people who are browsing this website to be able to see the icon. But for screen readers you may want that text that says LinkedIn but you want to hide that from people who can see the icon.

[00:06:26]
So we need to do a little bit of juggling here to expose the icon or the words to the correct person. Now, this trick of hiding the words, I recommend only when the icon is really truly something that your target audience is going to understand. This is a portfolio website.

[00:06:45]
People who are looking for employees know what LinkedIn is and know the the icon. They know what the GitHub icon But if you are in a situation where, I don't know, you want to have some sort of icon show up for the about portion of the page, that you're going to need to include some words with it.

[00:07:04]
So think through whether people will actually understand what that icon means. So the way we'll set this up is as follows inside of our icon, we're going to say aria hidden equals true. So this is going to hide the icon itself from screen readers. Okay? So that's the first part of this.

[00:07:35]
And then the second part of this is the with the word LinkedIn itself and I'm going to put a screen Span around this and I'm going to add a class of SSR hyphen only The word LinkedIn and then slash span So what is this? This is an SSR hyphen only anytime you see that, and you'll see it in Bootstrap.

[00:08:04]
You'll see it in Tailwind, you'll see it in all kinds of places, all kinds of frameworks. It means screen reader only. So this is a CSS style that comes from the bootstraps, or sorry, from the Font Awesome style sheet. And it will take that word and set it in such a way that screen readers are able to read it if they are reading your webpage but people who are looking at your page visually will not see that word and in fact.

[00:08:32]
That is what's going on here. You can see the LinkedIn icon, but you don't see the LinkedIn words anymore, but yet it's still accessible. So these are the changes that you need to make if you're gonna work with Font Awesome and you're gonna work with its icon set.

[00:08:45]
These two changes. The Aria Hidden True on the icon and then make sure the words are either there for everyone depending on the kind of icon that you're using or add that class of SR only if the words need to be hidden from all but screen readers. Those particular classes come from Font Awesome and the way that, It thinks about the world.

[00:09:07]
So just any page of icons that you happen to be looking at here. I'm gonna look at this chameleon, it has an FAB, start to add an FA. This link here has FAS starts with FAS. It has to do with some sort of styling here inside of Font Awesome but all of these icons will start with FAS, FAB FA whatever they all start with FA.

[00:09:36]
Fortunately there's a very cool selector that we can use that will say if it starts with FA... If it contains FA as part of the class name, we can apply certain kinds of styling to it. Let's apply that now because we need to make this a little bit bigger.

[00:09:55]
It looks kind of tiny right there inside of this nav bar. Here inside of my Nav bar what I'm going to do is add to this. A nav with a class and this is in square brackets, I'm gonna say class star equals, quote, FA, hyphen. And, We're going to say the font size Is 150% and the color is var aqua, all right?

[00:10:40]
So, font size not hard to understand, 150% means make it 150% bigger than the base font size. Color, probably you got that good. What about the selector? So this selector is called the attribute selector. So rather than looking for the HTML element UL nav A all the rest of them this is looking for One of the attributes inside of the HTML tag.

[00:11:08]
So here we've got we have a class, that's our attribute and we have FA B we have FA hyphen LinkedIn, right FA hyphen LinkedIn. So I'm targeting this starting FA hyphen portion of this class. So we're looking for an attribute of class. So that has a value of somewhere inside of that FA hyphen is part of the class name and if that's the case then apply this particular style.

[00:11:38]
So that is what this particular class is doing here