Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Turn your Social Media Icons into SVGs to get them onto your site in a scalable manner.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Down at the bottom here we want to replace
0:00
these placeholders with
actual social media icons.
0:04
So I do have some icons I've
downloaded from the Internet.
0:08
I'm gonna open those.
0:11
And you can see we have Facebook,
Twitter, and an RSS feed.
0:16
Gonna marquee over all
of them to select all.
0:22
Hit Command C, And, so
you can see I'll get out of full.
0:26
I'm just going back and
forth between these.
0:33
I'm gonna go back into my wire frame,
organize layers.
0:35
Okay, so now I will choose my
header in the 480 art board.
0:40
Command V to paste.
0:47
And what we want to do now is line
these up perfectly with where they're
0:51
at cuz the placement is right, and we also
want to confirm they're the same size.
0:57
Which these are clearly
bigger at the moment.
1:02
So let's see.
1:04
These are 60 and this is 120 by 120 so
1:09
I am gonna scale this down.
1:15
I'll do the same for these, if I double
click it takes me into isolation mode so
1:18
I just need to click once, and
1:24
that's what's happening is sometimes
I'll double click on accident.
1:26
So, transform 60 by 60, oops.
1:31
Okay, and then we'll do this last one.
1:43
60 by 60,
1:46
and we'll use our align
tools to line these up.
1:51
So I'll select, let's just zoom in
a little bit so you can see better.
1:55
Select the Facebook icon and this first.
2:00
Placeholder.
2:03
And then I'll select the placeholder
one more time because I want it to
2:06
be the target.
2:10
And then we'll do horizontal align center.
2:14
And vertical align center and
you can see that pops right into place,
2:18
that's perfect,that's just what I need.
2:22
I'll do exactly the same thing here,
horizontal line,vertical line.
2:24
Select that one more time.
2:35
Okay, great.
2:42
Good job, I am going to repeat
these steps on the desktop side and
2:43
I will meet you back and
we will move on to type.
2:48
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up