Home » How to make your own icon webfont

How to make your own icon webfont

n this text, I’m getting to examine the science behind creating in UI icons before teaching you the way to create your own embeddable icon font.
From planning the individual icons to changing them for @font-face embedding, and even licensing them for distribution, we have a tendency to shall be exploitation solely free computer code and on-line services. however concerning that? you may not have to be compelled to have faith in any of the arcane data needed to create in character set typefaces; simply a watch for planning things that will seem terribly, very small.
Ultimately, you must get away with a method for creating style components that extends way on the far side the manufacture of easy icons.
Before we have a tendency to continue, one thing ought to be same concerning what specifically we have a tendency to try to attain by exploitation icons in our styles within the initial place, and what makes one icon a lot of in than ensuing. Theory before application. so as to try to to this, we have a tendency to should take into account the icon’s role as a part of semiology.

What makes a good icon?
Semiology, within the broadest sense, is that the study of sign systems, however we have a tendency to contribute to their formation and maintenance, and also the impact they need on our understanding of the globe at intervals and while not North American nation.
Whenever you think about an area of your style work from the angle of what it signifies — what it’s oral communication to your audience or what ideas it’s recalling for them — you’re considering your style as a semanticist. though semiology, like linguistics, will cowl language, there are more things on a web site that “say” one thing while not words, like colours, typefaces and also the shapes that we have a tendency to decision icons. One ought to be cautious that what this stuff say includes a robust cultural dimension.
In China, the colour red will signify providence whereas, in several Western countries, it’s wont to denote danger.
The term “icon” includes a special which means within the field of semiology. associate icon is associate whole thing that signifies one thing by resembling it. Take, as an example, a map pin icon. As a form that resembles a “real” map pin, it’s able to signify it. In turn, the important map pin brings to mind all types of significant ideas. Among these ar abstract ideas like location likewise as less abstract ideas, just like the map to that the pin would possibly belong.
Some questionable icons don’t seem to be really painting. the ever present RSS icon, with its dot and 2 coaxal circle segments, no a lot of checks syndication than the words “Really straightforward Syndication” resemble it. The configuration of shapes that represent the RSS icon signify RSS by convention alone; we’ve got in agreement that this is often what they’re for. associate RSS icon is a lot of properly known as associate RSS image.
By now, I hope we’ve got established that in internet icons ought to meet one or each of the subsequent 2 criteria:
A strong likeness to a true factor, {for example|for instance|as associate example} a print icon that resembles an actual printer
Establishment and, therefore, familiarity as a recognizable image at intervals the sign system

Icon fonts gaining quality and popularity

Icons have long been thought of an honest thanks to enhance UI styles as a result of they supply a visible shorthand that assists the comprehension of associate otherwise strictly matter message. Sheets of icon pictures ar circulated throughout the net style community like contraband, every set promising to create your style shinier, a lot of attractive and a lot of clickable than the last.
Compared with pictures, plan|the thought|the concept} of exploitation embedded fonts for icons may be a comparatively new idea. However, it’s one that’s gaining tidy traction because of the various inherent benefits over the image (or background-image) methodology. I
wrote concerning a number of these benefits on my little web log back in early Sept. Chris Coyier clearly had an identical plan, introducing the thought to a (much, much) larger audience weeks later. Drawing on the 2 posts et al., I’ve compiled this comprehensive list of features:
They are simply resized while not degradation (because they’re primarily vectors)
Recoloring the icon is as trivial as recoloring text. for instance, color: orange for associate RSS icon
Many icons ar sorted into one file, necessitating only 1 communications protocol request
As Chris points out, they’re shapes that have clear “knockouts” that add browsers as early as IE6 (unlike alpha PNGs)
For icons that ought to seem adjacent to text, alignment and wrapping ar non-issues (because they’re text)
You can apply CSS3 effects via text-shadow and background-clip:text that respect the form of the glyptic art
Unlike with SVG, cross-browser support is simple to attain


In Chris’s words, exploitation fonts for icons may be a smart plan, I’m telling you. however, the established order relating to icon font usage isn’t ideal. Firstly, most of the standard fonts accessible, known as things like
Pictos, Fico, Klepto, Cheetos, Ponyo and Sailor Moon
(I might have gotten a number of these wrong), ar paid-for fonts. In follow this implies there ar very 2 problems:
1. You might need to dispense with cash
2. Whether you have got to dispense with cash or not, you’ll need to settle for someone else’s filthy style work

Aside from machine-driven crawler programs, I’m presumptuous that it’s principally internet designers WHO are going to be reading this text. I’m a styleer myself and that i don’t suppose I’m alone in resenting the thought of getting to compromise my very own design by hoping on somebody else’s handicraft. Naturally, I’m even less smitten with the thought of paying for the privilege. apprehend|i do know} what icons i would like to use and that i know exactly however i would like to tailor them to my overall style. i would like that management.
After some looking, i used to be eventually introduced to the chances of Inkscape‘s SVG Font Editor. With a bit follow exploitation Inkscape and also the facilitate of a web device to remodel my SVG font into a TTF, i used to be able to create “Heydings”. This font is currently enclosed in Simurai’s list (as joined to by Coyier’s article). I’m not attempting to sell you my font (it’s free anyway) however i feel it makes for a fairly smart proof of concept:

Making icon glyphs with Inkscape
Setting up Inkscape
Let’s start by downloading and putting in Inkscape. you must additionally use my icon font starter example, placed within the resources folder of
this GitHub repository (more on this GitHub project later). Once you’ve opened this enter your new Inkscape installation you must originated your space by gap the subsequent windows from the most menu:
In the SVG Font Editor pane, click on “Font 1” below “Font”. Your space ought to currently look one thing like this screenshot:

It’s value remarking that the baseline guide isn’t below the lower boundary of the canvas by mistake: For reasons best illustrious to someone else, your icons ought to terribly slightly overhang rock bottom of the canvas if you want them to share constant baseline as adjacent typefaces. I’ve tested this with Georgia, Arial and variety of internet fonts.

Making your initial glyptic art

To outline the glyptic art, click on the Glyphs tab within the SVG Font Editor pane, then click the Add glyptic art button within the lower portion of the pane. It’s not directly clear on initial scrutiny, however if you click on your glyptic art (“Glyph 1”) a field can seem that permits you to enter the character to that you’d wish to assign your icon. we have a tendency to shall be creating an easy star form initial of all, thus i like to recommend you enter the character “s”, “S” or “*”:

Now that we’ve outlined the glyph’s corresponding character, we want to create the glyptic art itself. Since we have a tendency to ar simply creating a star now, we should always choose Inkscape’s useful Stars and Polygons tool from the left toolbar and draw a star within the canvas. you may notice that this tool comes with choices that permit you to vary the looks of the star. In my example, I’ve chosen five corners, a spoke quantitative relation of zero.5 and a rounded price of zero.1.
Center the star horizontally exploitation the Align and Distribute panel (which could also be hidden below the SVG Font Editor) and drag the form downwardly to fulfill the baseline. With the grid turned off, the canvas ought to look something like this:

Glyphs in our icon font ar simply shapes; shapes with no colours, layers or gradients. So, to create our star a legitimate candidate for our font, we have a tendency to should convert it from associate object into a path-based form. To do this, choose the star and select PATH → OBJECT TO PATH from the most menu. Now, with the star chosen, we will attend our SVG Font Editor, highlight the applicable “s” glyptic art and hit the Get curves from choice button:

When you enter “s” in the Sample Text field, your star should now appear as a preview, like so:

Making an advanced icons

You’ve currently created your initial ascendable SVG font glyptic art. By exploitation choices from the Fill and Stroke pane, piece of writing path nodes and mixing objects and strokes you may be able to create rather more bold icon styles. I don’t need to travel into a full Inkscape tutorial as a result of we’ve got plenty a lot of to hide, however following these straightforward rules can stand you in smart stead:
Stick to exploitation black strokes and fills, if solely to cue you that the icons ar simply shapes, not advanced vector graphics. Coloring the icon is feasible within the final product exploitation CSS.
All objects and strokes (lines) should be born-again to methods exploitation either PATH → OBJECT TO PATH or PATH → STROKE TO PATH
Multiple objects and/or strokes wont to compose one icon glyptic art ought to be combined along exploitation PATH → mix (or, in some circumstances, PATH → UNION)
To cut forms out of shapes (like employing a cookie cutter) place the form that may produce the “knockout” over the most shape, choose each and select PATH → distinction. White areas on black that seem like “knockouts” won’t do, as you may discover after you hit Get curves from choice See rule one.

Preparing your font for embedding

Imagine {that you|that you simply|that you simply} have gone on to make variety of helpful icons for your font by repetition the glyptic art spawning methodology that I actually have just represented and saved the file as myicons.svg. Now, you’ll need to organize this icon library to be used in sites.
Converting the SVG to TTF
The first live you must take is to convert the SVG font into a a lot of acquainted and versatile format. TTF is that the pre-eminent format for native installation likewise as distribution. It additionally provides an honest base for reconversion to fulfill font-face needs. On-line services that permit you to convert fonts between formats embrace:
http://onlinefontconverter.com, http://www.fontconverter.org and http://www.font2web.com. My personal favorite, however, is http://www.freefontconverter.com as a result of I don’t get queued and I’ve ne’er illustrious it to come any glitches.

I won’t patronize you by explaining the way to use this resource. The serial file transfer field, choose part and mammoth Convert button represent themselves, really.

Editing the font’s meta data.

Now that you just have the TTF in your hand, i like to recommend you edit the generated meta information. Renaming, attributing and describing the font to your satisfaction makes it prepared for installation, embedding and distribution. It’s additionally the simplest way to point out that the font is your own work. Readers running Windows have the choice of exploitation the misleadingly grand sounding Microsoft Font Properties Editor or the free-for-x-days Typograf. For Apple and Linux users, I plead those higher educated than i’m to assist go in the comments.

Important note: though the Microsoft Font Properties Editor permits you to feature author, description and license info, it doesn’t appear to allow you to edit basic information like the font name and postscript name. These fields ar disabled. If you’re exploitation this specific piece of computer code, you’ll have to be compelled to find and edit the prohibited values within the SVG code before TTF conversion. Open the first SVG in your favorite text editor (I use Notepad++) and edit the following:
Font Name: Found in tag, font-family attribute
Postscript Name: Found in tag, id attribute
Description: You need to add an outline (author, license etc.) within the tag. Please note that this is often not resembling the TTF description text and can not be preserved through conversion; you’ll need to add the TTF description on an individual basis.

Making the font embeddable

Once you’ve put in the TTF on your native system and previewed it a bit to create certain nothing has gone awry, it’s time to run it through Font Squirrel’s
@font-face generator. to create the outputted code as economical and effective as attainable there ar a number of choices value noting within the generator’s skilled mode:
Subsetting: The subsetting choice permits you to incorporate solely the characters that you’ve delegated, reducing file size. Remove kerning: Your icons can nearly always seem in isolation, thus kerning (added info relating to the proximity of characters to at least one another) isn’t necessary. This will, supposedly, scale back file size likewise.
WebOnly™: If you’re evangelical concerning individuals exploitation your font as supposed ‐ and not reverting to creating pictures out of the glyphs in
Photoshonk ‐ you’ll choose this feature. it’s going to additionally higher fit your licensing set up. I’ll cowl licensing currently.

Distributing your font

If you’re inquisitive about cathartic your font, it’s thought of smart follow to offer it a license. several font websites won’t carry your font while not one. Since we have a tendency to used free, open supply computer code to create the icons, it’s fitting that we should always distribute them intrinsically.
There ar several licensing choices accessible and investigation them is typically confusing. The GNU General Public License is dead acceptable, however you will need to contemplate the SIL Open Font License. The most advantage with this license is that the provision of a reserved font name: alternative designers ar allowable to switch your font, goodbye as they name it otherwise. In follow, this implies that crimes against icon style can not be dole out “in your name”.
In the case of either license, you must embrace a version in a very document, likewise as inserting the copyright notice and a link to the total license universal resource locator within the font’s meta. Visit the several licensing pages (linked above) for a lot of specific directions.

The end of CSS spriting
Why stop at creating generic icons exploitation SVG fonts? With the flexibility to create icons comes the flexibility to create a lot of site-specific shapes, disapproval components and decorations. Like CSS sprites, all of those visual components is unbroken in one file, reducing server calls to a singular communications protocol request. in contrast to CSS sprites, the weather ar each resizeable and not addicted to point coordinates (background-position values) to show properly. This makes them eminently higher suited to responsive style.
Let’s faux I selected to use associate SVG font to hide some basic style components in my mistily
steampunk-like blog. A simple HTML table rendering of the component designs would look something like this:

One of the simplest things concerning this approach is that the skillfulness. as an example, the second cog form from the left can be used as each a small bullet purpose style and a large, abstracted background decoration. Coloring is as straightforward as exploitation color:maroon, however there’s no have to be compelled to adhere to flat colors; a mess of CSS3 effects is utilized to feature texture and somesthesis. For a bit inspiration to induce you started, examine this glorious gallery of CSS3-enhanced webfonts.
A quick note concerning screen readers.
One drawback with exploitation fonts to show visual components during this means is that the impact on screen reader output. A visitant to the positioning WHO reads visually can see cogs, arrows and also the like, however a screen reader can implement reading out the characters that designate these styles. For uses of SVG font components that ar ornamental, i like to recommend heeding Coyier’s suggestion: Assign the vectors to the Supplementary personal Use space of Unicode. Such characters shouldn’t be browse out by readers.

A cooperative icon webfont

As my JavaScript mentor, Rupert, noted to Maine the opposite day, exploitation SVG fonts to make icon sets offers a remarkable chance for collaboration. You see, SVG code ‐ that may be a type of XML ‐ is extremely standardized and simply human-readable. it’s precisely the kind of ASCII text file suited to development employing a “social coding” service like
The idea resonated with Maine for its philosophical doctrine implications: If the apprehensibility of associate icon is decided by accord, then for sure accord ought to additionally play a task in its formation. By collaborating over our icon “sign system”, solely the foremost prototypical icon styles ought to emerge. we should always be able to produce icon vocabularies that actually belong to the communities for whom they ought to mean one thing.
I have created a public GitHub repository to assist foster this concept. Called
Community Icon Font, the repository’s code base isn’t complex: an in depth scrutiny of the preceding Inkscape tutorial and a fast browse of the
project page ought to provide you with everything you would like to induce concerned. If you’re unaccustomed GitHub, strive staring at their
help pages or asking your neighborhood technician (that’s what I do).

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

2011 ©