If you have anything selected at this point, deselect it and select only the image you want the glyph to be. Now we are going to add the actual visual output that will be displayed when one types “w”. I will start with “walk”, with “w” as the string. Give the glyph a name and type in the string you want it to be associated with. To do add a glyph, navigate to the “Glyphs” tab add select “Add Glyph”. I will be creating 3 glyphs for this font family each corresponding with an element of the logo (“walk”, the footprints and “good”). Click “New” to add a new font and give the font family a name in this case “WalkGoodJa”. Text>SVG Font Editor opens the font editor. Think of glyphs as character symbols where each string is mapped to a corresponding glyph.

I convert each object into a path – Path>Union (ctrl ++) so that the font editor will grab the proper curves for each glyph we will create. I ungroup the elements, Object>Ungroup (shift+ctrl+g), but I need the footprints to be kept together. I will group them using Object>Group (ctrl+g) and then scale the unified object such that the proportions remain the same. Here you can see the logo is comprised of four different elements.Īs it stands right now the images are a bit small so I will enlarge them for the purpose of illustration.

typically have relatively small file-sizesĪs the name suggests, icon fonts are simply font files containing icons and glyphs instead of letters and numbers.

are easily aminated using CSS3 techniques.

are fully CSS customizable – you can change their colours and add effects using CSS.Now I have come to love icon fonts and if you don’t as yet, here are a few reasons why you should: I am not a graphic designer, so if i can create something decent, I’d only like to have to do it once.

For this reason I decided to create an icon font for the logo which would enable it to be used easily anywhere (website, posters, app branding etc). Anyway, I decided to use it as a placeholder for the purpose of the mockups if for nothing else. We don’t have a logo yet so I tried my hand at it and the reviews were more or less positive. So I’m in the process of creating a mock up for a project I’m working on called WalkGoodJa.

Inkscape svg font editor tutorial