Make your own CSS Icon Font with custom shapes in 4 minutes, perfect for Retina

Learn how to export an SVG graphic and turn it into an Icon Font in around 4 minutes. Perfect for pin sharp icons on retina and high resolution displays. Using Illustrator CS4 and IcoMoon.

---

Closed Caption:

so in this quick
screencaps I just want to show you how
to make
and I counseled so of
read about these few times icon France
resolution independent making it was
bigger smaller see
as you would like perfect for retina
displays acceptor
and love to talk about on this
particular post
am up she talkin acadian and this
weekend not come from
so it so own good if you go to something
like a.m.
IQ moon you can see you can download
any sort of and different fonts
icons that you want me a book you can
also
make any custom shapes
it fun she self as well and the key
thing to remember is if you can export
shaped as an XP G you can turn into and
I come from
what's sensually true I'm using
Illustrator
cs4 yet and simply because
things like fireworks and Photoshop
don't have very good
SVG Expo options a minute so without
further adieu
you can see that I've made very basic
star-shaped fear that the first thing
you gonna want to do
exchanged PAF and make sure it's set for
outline stroke
then we wanted a file safe weapon
devices
now I'm not sure if you can see it was
gonna see the San
see get better at. the many I've got
this set
to clip around the edges vs Fiji
by default it's at like this which is
the whole of gold which you don't want
you just want to get
actual font itself so make sure on this
image
size Tampere 1-click quite bold
to uphold rather click Apply when you
want to use SVG
I'm going with tiny 1.2 upset it behind
us in
sorry the highest decimals see more
complicated shape that the higher you
gonna want to have
are and click safe gonna save this into
am directory can save me any way you
want as long as its
SPG okay so exported to the SPG now
now the real money comes in ki-moon
dot com slash I comb slash shock
signs choosen which
sought in which fonts site which icons
you actually want to you from here you
can also import your own
as Fiji's so
one doing it some browsing SPGs dismayed
and there is
you can see am so you select we'll
custom shapes any other ones that you
want
quick there about me he could generate
funds
this gives me all the icons of chosen
that's what's going to be in my phone
and you can see it there this is what
letter
gonna be mapped to the front when you
when you use of
as I can what Kant to say if
and I'll save ya zip file
few on compressed stock
you'll then see folder you've got an
induction year
an example for other funds can be used
what's
ago us slow blues different clips
usually
cost names what it looks like great
application
am much if you want just cramped and the
CS ass
you can just open up pace TNT a
existing Style Sheets jumped on but
that's it
you can I come from with custom I
confronts
spoke often