Team: Icons

[00:00:00]
>> Now, let's move on to the icons. So for our icons, we are gonna give each icon a width and a height. Width of 50 pixels and a height of 50 pixels. Why are we using fixed width and height? What we wanna do is make these an exact size, because eventually we're gonna move them on top of the person.

[00:00:24]
We don't want them covering up the person too much. So, in this particular case, we do want them to be about that size. I'm gonna give this a background color of var green. So, that will give us our background color. And now, we can give us some padding of 10 pixels.

[00:00:52]
So, we'll have a little bit of space around. Just like that. So, you see when you put that on there. It makes your icon a little bit smaller and clears out space around each one of those symbols. Make sense? Okay. Then what do I need to add here?

[00:01:09]
Border radius. 50 percent. So, now we make a circle. Woo-hoo, yeah.
>> Sorry, why did padding make the images smaller?
>> Because, we're putting this on the icons. Which is the div that is surrounding the link that is surrounding the image.
>> Would it do that to other kinds of content, text or something?

[00:01:38]
>> Potentially, if you gave it a width and a height. Cuz, remember, we're working with border box. So, we said the width is 50 pixels and we've added now 10 pixels of padding. So, we've got to shrink the size of our content. That's what we have going on here, okay?

[00:01:58]
Yeah, pretty cool, okay. So, and then the last part of this is putting the icons on the image itself. So, back up here in the figure, well actually, let me do it this way. Thinking about how to do this, because you guys have never worked with absolute positioning before.

[00:02:20]
So, let's start it this way. I have my explanation here. All right, let's do it this way. Icons, colon first of type. So, what we're doing here is I'm selecting the first icon In my group of icons here. That's what that particular selector says. So, the very first icon, whatever it happens to be, that is the one we're going to choose.

[00:02:50]
In absolute positioning, we can say position of absolute. That's how it starts. If you notice the image has now disappeared. [LAUGH] Did everybody see that? I take it away it was there. And when I put it back, it's gone. Very nice, okay? And the reason it does that in this case it's going the upper left-hand corner of the screen.

[00:03:26]
So, we have to tell it to display somewhere else you can do that with the properties that are called top bottom right and left, and I am going to do right five percent top 55%. And you will notice that now I have an Instagram icon hanging out there in space, having a great life, okay?

[00:03:52]
Probably not what we want. And this comes back to the question in CSS, which is relative to what, okay? So, absolute positioning is going to allow you to take any element and move it anywhere you want on the web page. But, the question is relative to what? Its relative to its ancestor, with a position other than static.

[00:04:17]
Aren't you glad you know that now? A position other than static. So, static positioning is what all of these elements have by default, everything has a position of static. So, what this is doing right now, this particular position is 5% away from the edge of the page. And 50% down from the top.

[00:04:36]
Because, it's gone all the way back to the body element and it says, there is no other position other than static on this page. So, it's positioning relative to that top left corner here in the body, right? That's why it actually showed up here. And if you look at it, it kinda makes sense, right?

[00:04:53]
Looks like not too far from the right. Well, more or less in the middle, 55%, yeah? So, in order to use absolute positioning and have it apply to our figure. We need to add a position other than static somewhere here. And we can do that with our figure itself.

[00:05:14]
So here on my figure, I will add to this a position of relative. That is something other than static and it doesn't do anything necessarily with the way that this page is rendering. So, now my Instagram icon shows up closer to where I want it to be. It looks like I have probably something off somewhere here in my code.

[00:05:45]
But, that gets us closer. Questions on that so far? Okay, so here is the absolute coolest part of all of this. So, we have three icons. And you could set these up with classes and have them display on the page. But remember, we have some cases where we have two icons.

[00:06:13]
And we have some wonder why that did that. We have some cases where we have one icon, right? And we want them all displayed exactly in the right way. So, how do we get this to work no matter how many icons we have? Whether we one, two or three icons, and the way we can do this is with these wacky CSS selectors.

[00:06:39]
So, this is more oriented to you, more advanced developers. And I'm gonna walk you through exactly how you would set this up. So, if we have icons nth of type of two. This is gonna select the second icon And to that, we can say our position is absolute.

[00:07:06]
And our right position is -5% and our top is 41%. Okay, so there we go. Now we've got two icons there. So in other words, the second icon is always gonna go to this spot. And the first of type will go underneath of it. Notice how nicely that is working all the way through here.

[00:07:40]
And then, again, I'm not panicking until I put in all of my code and then I'll panic. The last one here, you CSS nerds will really appreciate this one. We actually have two types of styles that we wanna account for here. If we have, the only icon. Or if we have the last icon, in other words, the one in the third position has to be in the same spot.

[00:08:07]
And the way I'm going to do this is with is which is a new selector. So, if it is the last of type, only of type. And here we'll say position of absolute. Right will be -8% and top will be 25%. Okay. So, if it's your last icon, it's gonna show up here.

[00:08:44]
Or actually here, the Instagram icon. In the case where we only have two icons, it's gonna show up there. The first one will show up here. Or, sorry, the second one will show up here. I still don't know what's going on with this. I have to go back and look at that HTML.

[00:09:02]
I'm not sure why that icon is extra small, but anyway, there we go. And so, you can see how nicely this works for all of these. Whether you have one, two, or three icons. They are showing up correctly on the images. And the trick to this is to make sure that these classes are in exactly this order.

[00:09:23]
If you put them in a different order, it doesn't work. So, you have to list the last one, the middle one, and then the first one in order to get this to work correctly. Okay. And then my very last trick is to add a hover state for my icons.

[00:09:37]
So, icons colon hover. The background color will be var blue. So now, when I hover over those icons, their background color changes. Woo-hoo. Okay, now that I've completely blown your minds, Any questions on that? Just to say a little bit more about those particular selectors. So, first of type and subtype, last of type only of type.

[00:10:12]
These are pseudo classes that are available to us. I go over them in the intermediate HTML and CSS course where I talk more about selectors. And the same with the is, is, and has, and where are three brand new pseudoclasses that are out there. One of those parameters has to be true in order for the style to apply.

[00:10:36]
It's kind of a shorthand of writing a bunch of other things. So again, if you take a look at the intermediate HTML and CSS course, it'll walk you through all these wacky selectors that I've used here for this. Again, if you're more of a junior developer, you might find it works better just to have classes.

[00:10:51]
And you can assign them one, two and three, and assign the classes to the icons as you wish, okay? So, here we are. They're all stacked on top of each other here on the screen. And we have our icons in place. I love this trick. It's totally awesome.

[00:11:08]
So, I'm glad you all enjoyed it too.