All language subtitles for 9. Social Media Icons

The last thing that we have to do to finish up our footer if you remember from our design is to add

these social media icons here in the bottom right hand corner.

Make sure that these are lined up correctly.

We're going to be using the grid system again.

So let's actually start by coming up to the top and under our footer adornment let's import Facebook

from up to directories assets and then Facebook dot SPG and then we'll import Twitter from the same

place assets.

But Twitter dot SPG and we'll import Instagram from the same place of assets.

Instagram and then we'll come down here but below our image this time and it will create a another grid

container container.

This grid container is going to contain a grid item and inside this item let's create an image with

an alt tag of Facebook logo a source of Facebook.

And then we can go ahead and close that off let's create all of the items for the other icons.

So a grid item within image with an alter of Twitter logo.

And that's the source of Twitter.

Close that off and then our last grid item with an image Instagram logo source of Instagram.

Close that off and now we can go ahead and save this to see how far that gets us.

And at first you won't really notice anything except our slash.

It now appears is messed up and that is due to our images being rendered below it although you don't

see any images and that's actually because we haven't set a height or width for these images.

So let's go ahead and add a class name of classes dot icon to each of the social media icons.

So the class name to each of these and then we can come up to our styles object and let's add the icon

style here will start with just a height of 4 M and a width of 4 M also if we scroll back down to our

icons we haven't actually sent anything to navigate the user to the actual pages and so on are grid

items.

Let's add a component and instead of the link we're actually going to set this to a regular h t email

element.

So inside of quotation marks just put in a four hour anchor tag which will give each of these grid items

the same properties as an anchor tag.

So that means we can add a Harith which will tell the link where to go.

In this case too w w w dot Facebook dot com I'm just going to put the bass.

You are rails for these companies in here.

But if you want to go ahead and add your own page or something feel free to do so.

But we'll just leave that Facebook and then we'll come down and we'll add a components equals a for

both of these component equals A.

And then we'll also come up and add our half of in this case to be WW dot Twitter and dot com.

And in this case Sheriff w w w dot Instagram dot com go ahead and save this now.

We'll see the page refresh and you can see our nice icons underneath our slash.

If I go ahead and click this Instagram logo you'll see that it took me to just slash Instagram up here

in the page which obviously is not the correct page.

We want to be on.

And that's because we actually need to tell these links to open up in a new tab or to open them in the

app.

If a user is on a mobile device and so we also need to come and add to these grid items let's also add

a real property set to quotations and then no opener so no spaces and then a space no refer work.

So make sure you have those correct.

And then we'll also add a target equal to quotation marks underscore blink and this will tell these

links to open up in a new page or the app.

So let's go ahead and we'll copy both both of these props and paste that onto not the image but our

other grid items and we can go ahead and save this now and the page will refresh.

Go ahead and click one of those links to now be taken and it actually looks like it is going here to

this wrong U.R.L..

So let's go for all of these.

Make sure you add an H TTP colon slash slash in front of it.

And that will just make sure that we're actually getting to the right page at age GDP slash slash.

And actually make age GDP s just for safety and if we go ahead and save that now the page will refresh.

And now if I try and go to one of these links you'll see that it takes me over to Instagram so I'll

close off out of that but you can see that the links are working these icons however are obviously not

in the right place because we don't want it to be underneath the slash.

We want it to be sitting on top of it just like these links were and be able to move around independently.

So let's go ahead and on our grid container where all of these social media icons are.

Let's go ahead and add a class name here of classes dot social social container.

So then we can come up to our styles object and we'll add these social container styles beginning with

a position of absolute just as we had done for the footer links container.

So let's save this and see where that gets us.

And now you can see that we have this gap underneath the footer where our icons are actually being hidden

to go ahead and pull those back up into view.

Let's go ahead and set a margin top on our social container to negative 6 m and so that's going to move

our container up by setting the negative margin on the top which should bring them back into view.

So if we go ahead and we save that we now see that our icons are sitting on top of the footer where

they're supposed to be.

Now we have the problem though that they're on the wrong side so to get them over onto that right side

let's go ahead and specify a right property which tells the elements how far their edges should be from

the right edge of the screen and we'll set this to one point five m.

And now if we save that we'll see the screen refresh and it still isn't in the right place but that's

because we need to actually go down to our grid container where we're setting these social icons and

we need to add a justify property set to flex end and ASOS since we are using this container with the

default direction of row the justify property is going to target our main axis which is the left and

right horizontal axis and setting the Flex end property will push these icons over to the far right

end of that main axis.

So let's go ahead and save the code now and we'll see there are icons were properly pushed over to the

right edge while still maintaining that extra little margin from our right property now I also want

to add a little more space between those icons themselves and so just like we did for the footer links.

Let's come up to the container again and we'll add a spacing property so that we can space out all of

the grid items inside this container which are icons.

So we'll add a spacing of two just as we did before.

We'll save that and we'll see the page refresh to now give us a little better spacing between our icons.

If we go ahead now and we start shrinking our page down we'll see the links disappear.

But our icons remain there as we continue to shrink down the page all the way down to our smallest size

at this small size however you can see that those icons do look a bit too large and kind of out of place.

So let's go ahead and add some styles to make the icons responsive to our screen size ensuring the best

look across all devices.

So let's come up to our styles object and under the icon.

Let's go ahead and we're going to add a breakpoint here using the theme dot breakpoints syntax to specify

when we are down below the extra small breakpoint.

So for extra small or below then we're going to change our height to 2.5 M and do the same for our width

as well 2.5 M we can save this and the screen will refresh.

And now we can see that we've got much smaller icons there that look like they're sized appropriately

for the screen.

Now this looks pretty good.

But if you go ahead and open the development server up on your phone you might notice that the icons

could use a little bit of pushing over still.

I think that there's still just a little out of place.

And so if we come over and let's actually just copy this breakpoint here and on our social container

we'll add that breakpoint but get rid of these properties and just add a right property and we'll overwrite

this to just zero point six m.

And so if we save this we'll see at the page refresh.

And now these icons are going to be much more closer to the edge for mobile devices which I think gives

it a much cleaner look.

And if you don't believe me then pull it up on your phone yourself and I'm sure that you will see that.

And with that we have already completely finished up our footer.

It really wasn't much to do here.

We just have to kind of wrap our heads around the grid component.

But this was a really good example to use for learning the grid.

Before we get into the actual more complex layouts of the content on our different pages.

That is when we're really going to have to worry more about how content is resizing for different breakpoints.

And so by getting the core functionality of how the grid system works in this less complex example I

think that that's going to make it a lot easier for you guys to focus on the responsive aspects of it

when we move on to the later sections.

So you can see if we go ahead we can make our screen bigger again and our footer links appear with our

icons still down in place and now the backbone of the site is really finished and everything else kind

of builds on top of what we have just learned and is sandwiched in between the two components we have

just created.

So these really weren't necessary for everything else that we're going to do and have come together

to look great.

So now that we have our header and our footer finished it's time for us to dive into the actual site

itself to get down and nitty gritty with the content with the animations with our complex layouts and

let's go ahead and start getting an idea of what that's going to take what that's going to look like

in the next section.