Since I had a hard time finding an icon set that was specific to eCommerce, I decided to create and share my own set of eCommerce icons. Once we have created our icon set I’ll show you how to use a great site Fontastic.me to create your very own scalable font, so you can download and use it for your site. Oh and did I mention it’s FREE!
You can skip ahead to part 2 if you already have your icons ready
PART 1: Icon Design
Why do we want to use an Icon Font? Geeez I can use a spritesheet for all this.
‘Cause we need it to be responsive BRAH! We want to create an icon font so that we don’t have to reproduce tons of sprite sheets for mobile, desktop, tablet, and retina screens (desktop and mobile). Ain’t nobody got time for that! ZING!
Icon Font Benefits:
- Icon fonts have relatively small file-sizes, especially the more icons you use
- Browser support for IE7 & IE8 – so you can impress your developer for a change
- Full CSS styling capabilities (Like a Boss)
- One single http request
Creating Our Icon Set Illustrator Stylez
First things first. The best way to start without pulling out your hair, is quickly write up a master list of all the icons you want to include in your set. This can always grow over time into a full icon list you ever use, but we just need to start somewhere.
Open up your Adobe Illustrator and we want to first change our units to pixels. This will make it easier to visualize what our initial “x” height of our soon to be font. Next you want to make a document that is square that will house your beautifully wickked awesome (in a boston accent) icon set. For me I used an artboard size of 54px by 54px with a maximum width and height leaving a bit of margin around the edges. It’s important that every icon has the same baseline, and does not exceed your maximum height.
To make things easier on myself I made all my icons simple line drawings, and each icon has it’s own layer:
Icon Design Tips:
- Keep it very simple with only black (no colour, or grays)
- Focus on scalability, so no fine details that could be lost at small sizes
- Make sure all strokes have been expanded
- Before you save your seperate SVGs, make sure all shapes have been combined
Once you have completed your icon set you want to make sure that you convert all of your strokes (if you used any) to shapes. Select all your icons and go to Object > Expand and make sure the stroke checkbox is active and click ok.
Finally we want to go through each icon and make sure to combine all the shapes using pathfinder’s unite so we don’t get any weird overlaps or glitches in the final font.
Now we just save-as with only one icon layer showing as an SVG. Make sure to name them appropriately (ex. “DM-shopping-cart.svg”), it will save time when Fontastic generates css classes for our awesome sauce icons.
Below you can download my complete icon set working file 🙂
PART 2: Using fantastic Fontastic
Do you believe in Magic?
Now the fantasgreat part! We can now use Fontastic.me to convert our sexy SVGs into a usable web fonts! The other great part about Fontastic is you can add other icons to your collection as well. Say you love the UI icons from FontAwesome, you can add them to your custom font so you don’t have to create all the icons. Sign up for free and follow along. Now remeber that Fontastic.me needs each icon to be it’s own seperate SVG.
You can go back to part 1 if you need help creating your icons
It’s as easy as Garfield Eating Lasagna…
Now that you are all up and running we can start making our awesome font. Once your signed in you can see all the different sets of icons that come standard. But we want to focus on going up to the menu to import our icon set.
Once you have uploaded all of your SVGs, (which you properly named of course), you will be able to see your set right in Fontastic! This is great because you can see any potential issues with any of your icons because the preview is at a small size. Now you want to click the menu on the right so we can then give this bad boy a name.
Now why I use Fontastic above all other tools…
Now we can select our new icon set and add them to a font set. You can even add in your favourite other icons from the other sets as well. Fast, efficient, and your developer won’t kill you for having to import multiple sets of fonts (mic drop in front of the dev team, and moonwalk away). At any time you can click on your “Font Settings” to change the name of the font and the CSS Class Prefix.
Now with your set of icons selected we can go to customize to see how this whole thing will work. Remember when I said to name your SVGs appropriately? They use the file name in the CSS Class Mapping that it auto generates. SWEEEEEEEEET (Cartman’s voice).
All that’s left to do is download our great font! I personally prefer the Install Manual option, because you don’t have any server request limitations, which also keeps it free to use. It also has all the info you need to know how to implement your font using either character mapping or CSS class mapping. Download your set and your good to go! They even have an icons-reference.html page so you can view it and have a cheatsheet. You can download my freebie set I created here
Since you did all the hard work of creating your awesome icon font, let me congratulate you and give you a free download of a simple UX site using the Demac Icon Set 🙂