All righty, so moving right along, we're gonna learn how to install our Font Awesome icons into the angular project. So to begin with, we're going to go to the Font Awesome website. And we're going to go to the angular section, which I've done already, I'll provide the link. And you're going to click on the API docs, which I've done already. And eventually, you're going to scroll down and you're going to see this installation section. So you can see here we have the two main parts, the SVG cooler and angular dash font.

Awesome. And then we have these solid icon packs that are free and brand icon packs that are free and the regular icon packs that are free. So we're going to need to install all five of these things. And we're going to do it with NPM instead of yarn. All right, so let's go back to Visual Studio code and we're going to Ctrl single quote to bring back up our terminal. So you can see we still have our development server running here.

We're going to add a new terminal. And we're going to type npm install at fort. Awesome. So they're the makers slash font, awesome. Dash, SVG dash core. And so you can actually do all of these installs on one line, which is what I'm going to do here.

Angular dash, awesome. This is gonna be free dash brands, dash speechy dash icons. Free dash, regular SVG icons. And lastly, Free dash, dash speech icons. And then we're going to add at the end, save dash dev to save it as a dev dependency. And we'll let it run.

Alrighty, now that that's finished, we will minimize the terminal. And so the first thing we're going to do is we're going to set up actually importing that into our project, we're going to go to our app module. And so this is where we would import any kind of third party components or frameworks, you can see that we have Angular at the top here. And now we're going to be adding Font Awesome. So we're going to start with an import statement. So we're going to import the Font Awesome module and from and this is kind of cool autocomplete, so we want the first one and then we're going to add add a semicolon at the end onto our next import statement import library.

And this is going to be from the SVG core stands for Scalable Vector Graphics, which are pretty neat. And we're going to have our final import statements. So in this one, we're actually going to import any of the specific brand icons that we want to use. So you can kind of see the pattern here. We have just fa, and then the name of whatever the company is. So if he wanted to add Facebook or Twitter, you can kind of see the formula.

You can always double check on the Font Awesome website to make sure that they have an icon for it. And this is going to be from the brand icons. All right, cool. So we need to start actually doing stuff. All of these are grayed out compared to these because we're not actually using them for anything. So we're going to start with the library.

And we're going to do dot add. And now we're going to enter in everything that we just entered there. And this is going to autocomplete, we actually just need to type the first three letters because no combination of those three letters are the same. Right, and we're going to add a semicolon there. So you can see these are all good, but this is still grayed out. That's because we actually need to add it to our imports in our engine module here.

So again, that's gonna autocomplete and we're gonna add a comma there. Alright, awesome. Okay, so now we're ready to actually put The icons into our HTML. So we're going to do that we're still in our home section here, we're going to comment out another title Ctrl J and then social icons, che control question mark wow for the third time. Okay. And now we're going to make a div dot social icon.

So this is going to be our container, press Enter. And then inside of this, we're going to make eight elements that we're going to wrap everything in. And we're going to add a few quick refinements here. So target underscore blank, that's going to have it open in a new tab. And REL no opener is a security feature that is suggested through the lighthouse audits. Alright, so we can copy and paste these we're going to have six in total.

All right, next, we're going to create our F A dash icon elements. And we're going to bind icon so icon in square brackets equals, and then we're going to do double quotes. And then we're going to do square bracket, single quote FA B, single quote comma, and then we're going to go in order of the ones that we want to use and close the square bracket. So you can see that we have FA B, that stands for fa, and then brands. And you can see that we just have the regular name, not the FA, and then the name. And we're going to follow this same format the whole way down.

So all of this is in the documentation. But again, I'm just going through it because I know how to do it already. So I'm just going to change all of these here And then I'm actually going to do one more thing. And I'm going to add a title to each of these so that when people hover over them, they know what it's for, in case they've never seen the icon before. Alrighty, so now we're finally ready to style our icons. So we can go into our CSS.

And we're gonna go down here below main title, come out another title, I think it's very important to be organized. And the better organized your code, the easier it is to collaborate with you. So that's something that I usually try to follow in, so should you. Alright, so we're going to target our dots, social icons class, and we're going to give it a position position absolute. And so we're gonna put it we're going to give it a top of, let's say 60%. So that it'll kind of fall a little bit below our title or their top for our title is 30%.

Alright, and then below that we're actually going to target special icons. And then we're going to target any FA icon element that is a child of social icons. We're doing it this way so that later on with our footer icons, they can have different styles. So what we're going to do here is we're going to set the size the color, we're going to make the cursor become a pointer, and we're going to give them some padding so that they're spread out from each other. Right, so we're going to start with a font size of three REM color, white padding 7.5 pixels and 15 pixels. So the first number is top and bottom, the second number is left and right.

And then we're going to give it a cursor pointer. Okay, so that's it for our styling for now let's let's check that out and see how it looks. All right, that's looking pretty, pretty nice. So as we hover over, you can see we have the title pop up there. That's nice if anyone is unfamiliar with these icons. Alright, that's looking pretty cool.

But you know what I feel like it is a little bit left of center. I feel like it can move over a little bit more. So I think we can fix that. We're just gonna add a margin left of five pixels. Okay, let's check that out. Alright, yeah, I think that's a little bit better.

It's a little more in the center there. All right, cool. So the last thing I think we can change is maybe as we hover over, there's some kind of color change or something. That might make it a little bit more, more dynamic. Alright, so let's go back and we're going to go underneath here, and we're going to target our social icons auto completed FA icon, and then we're going to target the hover pseudo class. So inside of here, we're going to set a new foreground color.

So instead of it being white, we're going to have it be like a dark gray color. You could use any color that you want here. And then I'm going to flip it so that the background color is white. Alright, so let's see how that looks. All right, very cool. That's a lot more dynamic and It's kind of giving some feedback to the user.

You can adjust the padding if you want to. But yeah, I think that's, that's looking really good. All right, so I think we're actually pretty much done with our homepage section. I think it looks pretty cool. We got our nice video background, we got our nice custom Google Font title, and we have our nice dynamic Font Awesome icons for social media links. Alright, so in the next section, we'll look at tackling the about section.

Seeing that one bye for now.