Icomatic FAQ

What kind of browser support do Icomatic fonts have?

It (of course) varies by browser. Using ligatures (or, icon names like 'alert' rather than just a character 'a') works in most modern browsers. In addition, you can use the included JavaScript fallback to achieve compatability with older browsers. The below table should provide some background.

C S FF IE O iOS A
Ligatures 11+ 5+ 3.5+ 10+ 15+ 4.2+ 3+
with JS 1+ 2+ 3.5+ 7+ 10.5+ 3.2+ 1+

To use an icon, simply apply the generic icomatic class to the element wrapping the icon name. In this example, the word 'alert' will show as an alert icon:

<i class='icomatic'>alert</i>

To use the JavaScript fallback, include the following script in your html's <head> section:

<script src='icomatic.js'></script> <script>window.onload = function() { IcomaticUtils.run(); }</script>

To see an example of icon use, including the JavaScript fallback, check out the sample html file in your downloaded kit.

Are there any limitations on ligature names? (Why aren't my ligatures substituting correctly?)

Yes. Right now, it's best to keep limit ligature names to letters and numbers. In particular, punctuation marks (dash, underscore, space, etc) will not work, but there are probably many other characters as well.

Are there any limitations on imported artwork? (I imported my artwork, but it doesn't show up. What gives?)

There are artwork limitations. You can only use svg polygon or path elements, and we do not yet support transforms. If you're artwork isn't showing up, try removing group (g) elements prior to import.

My icons include ligature names that seem to be conflicting. What can I do about that?

If you are seeing a different ligature substitution that is also valid, and it is a question for priority. For example, if you have a ligature for "arrow" and "arrowright", then type in "arrowright", you could substitute for either "arrow", and have "right" unsubstituted, or substitute for the entire "arrowright" string. In general, it's best to limit the number of such naming conflicts in your font. Eventually, you will be able to prioritize which ligature substitutions to use, but we're not quite there yet.

Why does the size and color control occasionally disappear when I am using the sample page that comes with my custom icon font?

In the Preview page, 'H' toggles the visibility of the control that allows changing the color and size of your icon font preview. You can type 'H' again to toggle visibility.

I would like to modify my icon font, how can I do that?

Currently, you cannot modify an existing font created with Icomatic, so please keep hold of your original SVG files. If you want to modify a font, you will have to restart the font creation process by reuploading your SVG files.

The application gets stuck or crashes. What's up with that?

Development on Icomatic is still very early. If you run into a bug, please let us know at icomatic [at] gmail.com, and we will try to get it fixed as soon as possible.

What size icons are the Icomatic icon font sample kit?

Our icons are optimized for multiples of 20px, and are auto-hinted.

Can I use my Icomatic icon font in other programs like Photoshop, Illustrator and Fireworks?

Yes, you can use the .eot and .ttf fonts as you would any other system font. Just make sure your program enables ligatures.