We tried creating icons using Photoshop and Fireworks but both do not support SVG the way Illustrator does. Recently we (UNITiD & de Voorhoede) worked on a project that required some custom icons and making an icon font was the way to go.

Icon fonts are supported by all modern browsers.Īdmittedly icon fonts are not the best solution for all projects, but by using them you can’t really go wrong either.Using CSS you can add: gradients, shadows and pretty much any CSS behaviour you fancy.Need a icon in different colors? No need to design it, just change it in the CSS!.Your icons are always crisp, even on retina displays.You can use the align tool to align the shape and text. Step 2: Place the shape in front of the text. For example, you add the icons of the flavor in front of the text. Obviously, you can create a circle using the Ellipse Tool too, but let’s try something else. Need the same icon in different sizes? The SVG format is scalable and so are fonts so one size fits all. Step 1: Create a shape or even a vector icon.Just 5 situations that you want to use a font rather than a bitmap image: Next to boosting speed and performance it gives you a lot of freedom in the front-end development phase. 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. Described in this post is the flow for working in Illustrator (any version that supports the ‘Artboards’ function should work fine). 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. 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).

Adobe ai icon