Navbar Icon Practice

[00:00:00]
>> I would like you to first of all, take the GitHub link that we have here, swap that out for the GitHub icon, make it accessible. And then the second thing I'd like for you to do is I'd like for you to find some kind of icon that might be suitable to go with your name.

[00:00:17]
So in my case in my website here, I picked the HTML icon here, but there are many other choices 1608 choices for an icon. So I'd like you to pick something from the font is awesome choices that might go with your name and get that installed as well.

[00:00:38]
That's gonna require a little bit of styling trick there also to make it work with your name, so you might have to write an extra class in order to add a little bit of styling to that, see how far you get and then I'll tell you my answer.

[00:00:51]
Go ahead Hope you all did well with that navbar exercise. Let's take a look at how we might go through adding those particular icons to our web page. So here's what I've got going on in my particular let's start here with the HTML, so here with GitHub pretty much looks exactly like LinkedIn, except it has a different code, of course for the icon.

[00:01:26]
So here we've got the GitHub square, Aria hidden true, screen reader only is the GitHub icon. And it should have taken the same styling that the LinkedIn icon did. So you should be pretty well set up here. And then up here at the top of the page, as I said before I chose this particular icon to represent me, I hope you chose whatever represents you well and was available there on font awesome.

[00:01:55]
So I hid that particular icon, right, so aria-hidden true, I don't I need that icon to be visible to screen readers, but I wanted my name to show next to it. So the way I set that up was with two different span elements. One span contains that icon, the other span is going to contain my name.

[00:02:15]
So those two things will just sit next to each other very nicely. And in the reason when I added that span element is down here in my CSS one of the things that I added here in my nav h1, I didn't want that icon to be so big by default.

[00:02:35]
So here for nav h1 with the class of fa. So notice that that comes after the initial nav class fa attributes selector declaration. I reset my font size to a hundred percent and I set my color to aqua and to get these two be magenta on mouse over.

[00:02:59]
Okay. So by default they were not magenta on mouse over and the reason why is because the class up here nav class fa is more specific than simply nav a hover. If you look at the CSS specificity part of this that does not work so you'll need to add an additional class here in order to get that to work on hover for those icons.