Navbar SVG Icons

[00:00:00]
>> Before I go about changing my name and making it smaller and all that kinda stuff, let's put in our graphics. Because if we take a look at our navbar again, instead of the words LinkedIn and instead of the words GitHub, what I actually want here are the icons for those.

[00:00:17]
And I wanna add a cool comment icon next to my name. You, of course, can choose whatever kinda icon you want, all right? And so the way we're going to do that is we are going to go to fontawesome.com. And even if you are not a fan of Font Awesome in terms of using it from a font perspective, this will give you all of the icons as SVGs and they are free to use.

[00:00:42]
And so that is the way we are going to use these today. What is an SVG? What does that stand for, SVG?
>> Scalable vector graphics.
>> Scalable vector graphics, what the heck does that mean? Graphic, we're pretty clear on, yeah? What does the vector mean?
>> You can zoom as much or as little as you want and it still looks crisp.

[00:01:09]
>> It looks crisp and beautiful, right, because it's drawn with math, not with pixels, right? So like a picture, you can zoom in and it looks fuzzy eventually cuz it's drawn with pixels. But vector graphic is drawn with math, and so you can zoom in indefinitely. It's like a font in that way.

[00:01:27]
So we have math equations describing curves and things behind a vector. And what does scalable mean? Scale it, yeah? Okay, so that's a scalable vector graphic. So here in Font Awesome, we wanna use the free version of this. So if you go up at the top here to Icons, and then you can search these icons.

[00:01:51]
I'm gonna type in LinkedIn into my search box here. And then if you choose Free, it will filter those for you and show you the free versions of LinkedIn. And I don't know why StayLinked is in there, but anyway, you have a choice between what kind of icon you wanna use.

[00:02:10]
I'm gonna use the first one, the one in the box, okay? And if we click on that, it's gonna show you how you could go about including this in your document, you have to hook up the font to the webpage, et cetera, et cetera. What we're gonna do is we're gonna go to SVG here.

[00:02:30]
And this is gonna give us the SVG code for the LinkedIn icon. And if you click this, right, it will say that it has copied it to your clipboard. And now we can go back to our pen and go back in our navbar on the HTML side of things, and where you have the word Linkedin here, okay, you can paste your SVG code.

[00:03:00]
And it'll look really, really wacky, and that's okay. Format your HTML afterwards, too. Okay, so did it work? Well, what we have going on here right now is there is an icon here. It's clickable, but SVG, by default, has a dimension of zero by zero. [LAUGH] So it's there, but you can't see it because it has scaled its little vector cell font down so small that you can't see it.

[00:03:34]
So don't panic. Let's just leave it there for the moment. And now what we're going to do is grab the GitHub icon. So we're gonna do the same thing. I'm gonna do a search here for GitHub. And the free version. And there are choices here to be made as well.

[00:03:55]
I think the one I had was the square one to match my LinkedIn one, which was also square, but you can pick whichever one you want. And then we'll go to SVG and we're gonna copy that one as well. And then we're going to go back to our CodePen.

[00:04:13]
We're going to find the word GitHub here. And that's where you can paste in your SVG. And you do not have to worry about what that says at all, okay? That says make a GitHub icon. We don't particularly care what that says. And then finally, the last one is an icon to go by your name.

[00:04:37]
And I think the one that I use, I think I typed in comment and got the meteor. Yeah, I got the meteor here. If you wanna use a different icon, there are 2,000 free ones to choose from. Feel free to look through them. Take as much time as you want.

[00:04:55]
It will be a while. [LAUGH] It's one of those things that you can spend a lot of time on. But I'm just gonna use the meteor here. And once again, I'm gonna go to the SVG tab. I'm going to copy that. And then I'm going to go back to my webpage.

[00:05:12]
And next to my name, I don't actually want to replace my name. I want it to go next to my name. So I am going to paste in my SVG. And then it will say Jen Kramer and it will look like this. And that one turned black. What happened here?

[00:05:33]
Why is this one black?
>> The header color?
>> The header color, maybe. How about the h1 color? You're very close. The h1 we know is black, okay? The other ones later, we don't really have a color set. So they're actually kind of displaying really, really small. So here, this is the meteor taking on those dimensions of the h1.

[00:05:55]
[LAUGH] So it's really super big. It scales up to a ridiculous size. That's what's going on here. Cool, all right, and then the last thing I wanna do here before we go and style everything, let's scroll to that last link in our navbar. And this is the resume link.

[00:06:16]
I want to add to this a class of button, class="button". And because we coded that earlier, you should wind up with a beautiful green button right there on your page when you add class of button to the a tag there. So right here, class of button. Did it work?

[00:06:39]
Fantastic, let me ask you an accessibility problem here, which is that we have these SVGs now that are taking the place particularly for LinkedIn and for GitHub, and we don't have that text that's there anymore. So if I was a screen reader, how would I know that those are LinkedIn and GitHub elements or tags that are gonna take me somewhere, to LinkedIn or GitHub?

[00:07:04]
How would I know? Anybody? The answer is you have no way of knowing what you're going to go to right now. So if a screen reader was reading this, it would read off projects, about, contact, link, link. It wouldn't know what those were. So let's give the screen reader something to indicate what this is.

[00:07:27]
So back here at the top again where we go to our h1, a href="index.html". We're going to add an attribute here that some of you may be familiar with, aria. Aria always has to do with accessibility. It's usually followed by a hyphen and something else. In this case, it's going to be aria-label=, and I'm going to say click for home so that people know when they click this link, it's gonna take them to the homepage, okay?

[00:08:03]
That's one thing that we can do. And then for the SVG itself, and this is that meteor SVG, what we can do is add to this aria-hidden="true". So what this does is the screen reader will read the link and know that this is a link that's gonna take you to the homepage, awesome, and it will skip right over the SVG.

[00:08:32]
Because the SVG is really for people who can see it and go, wow, cool, it's a comment. Didn't really have any other purpose on my page other than it's fun to look at, right? Yes.
>> So we don't use the alt attribute because it's not an image technically.

[00:08:49]
>> Correct, exactly, and we're going to be hiding them anyway. They are eye candy. Okay, so then we're gonna do the same thing here with LinkedIn. So when I get to my link here for LinkedIn, I'm going to add to this aria-label="LinkedIn". And then for the SVG associated with it inside of that first SVG tag, we say aria-hidden="true", okay?

[00:09:32]
Alt text, of course, is great when you have an image that is adding something to this webpage and that it's communicating some kind of meaning. In this particular case, these images are really eye candy and by using the aria, what was it? The aria-label property here, this is giving us the text that the screen readers need in order for this to work.

[00:09:58]
And this is what the accessibility people are recommending, to make SVGs accessible. So I bow to their knowledge on this particular point. So then, of course, we're gonna do this one more time. We're gonna do this for GitHub. Aria-label="Github". And in the SVG itself, aria-hidden="true".