Today we have a pdf to share with you, one that you can print out and hang on a wall (either in your office or your bedroom, you decide). It is a small flow to create SVG files using Adobe Illustrator for using a service like Icomoon to create an icon font to use for websites. Described in this post is the flow for working in Illustrator (any version that supports the ‘Artboards’ function should work fine).
So you might wonder “Why make an icon font?” for one it’s fun! Also you can create custom icons to give your design that little something special. Next to boosting speed and performance it gives you a lot of freedom in the front-end development phase.
Just 5 situations that you want to use a font rather than a bitmap image:
- Need the same icon in different sizes? The SVG format is scalable and so are fonts so one size fits all.
- Your icons are always crisp, even on retina displays.
- Need a icon in different colors? No need to design it, just change it in the CSS!
- Using CSS you can add: gradients, shadows and pretty much any CSS behaviour you fancy.
- Icon fonts are supported by all modern browsers.
Admittedly icon fonts are not the best solution for all projects, but by using them you can’t really go wrong either. Recently we (UNITiD & de Voorhoede) worked on a project that required some custom icons and making an icon font was the way to go. We tried creating icons using Photoshop and Fireworks but both do not support SVG the way Illustrator does.
So the 7 steps? Here they are!
Step 1 Open Adobe Illustrator (that was easy)
Step 2 Create a new file
Step 3 Set up a new artboard, we recommend using a square (anything up 34×34 pixels works)
Step 4 Give each icon its own artboard (make sure the artboard sizes match)
Step 5 Give each artboard a logical name (this will be the name of the SVG file)
Step 6 Use ‘save as’ to export the SVG files
Step 7 Select ‘SVG’ under the ‘format’ drop down and make sure you check the option ‘use artboards’
If you like to read these steps back you can download the poster
Download and print
Just a 3 things that you as a designer should keep in mind:
- Use fills not lines (this will not work)
- Use cut outs
- Only use one color (black)
Hopefully these simple steps help you to improve your workflow!
Geplaatst om: 15:32 op 3 July 2014 :
3 July 2014 op 15:32:
When you say “Canvas”, you probably mean “Artboard”, right?
Geplaatst om: 10:47 op 15 July 2014 :
15 July 2014 op 10:47:
Yes I do, thanks for pointing it out! I will change this in the post, where the rest of the steps helpful?
Geplaatst om: 08:29 op 13 February 2015 :
13 February 2015 op 08:29:
Bart, you still need to update the PDF.
Geplaatst om: 21:24 op 21 August 2014 :
21 August 2014 op 21:24:
These steps are indeed very helpful. Good job.
Thanks!
Geplaatst om: 13:17 op 18 November 2014 :
18 November 2014 op 13:17:
When saving as SVG in illustrator, we get multiple options to choose the SVG profile.
Can you kindly mention which SVG profile is best for creating icon font.
Geplaatst om: 14:00 op 9 December 2014 :
9 December 2014 op 14:00:
Do not worry too much about the profile, Icomoon doesn’t seem to care. I guess you need to embed the image rather than link to it
Geplaatst om: 11:18 op 21 April 2016 :
21 April 2016 op 11:18:
“Link image” should be used. “Embedd” option is enlarging icon size not necesairly. Take also SVG 1.1, Subsetting: None, unchecked “preserve Illustrator Editing Capabilities”, CSS propert: Style Attributes. SOme font-icon generators have problem with the pictures, who arent “compound paths” – all elements have to be one object. Otherwise icon isn’t properly located or incomplete on preview.
Geplaatst om: 09:12 op 15 January 2015 :
15 January 2015 op 09:12:
Thank you, This is very helpfull.
Geplaatst om: 09:41 op 5 March 2015 :
5 March 2015 op 09:41:
Yes, this helps! No white is so obvious, once you know it… Thanks!
Geplaatst om: 13:59 op 5 June 2016 :
5 June 2016 op 13:59:
Hi, you can now turn your icons into a font with a single click, directly from Illustrator: just drag all your icons on Fontself, a cool new add-on: http://www.fontself.com
Enjoy! =)
Geplaatst om: 11:16 op 11 July 2018 :
11 July 2018 op 11:16:
Great post