Iconion: awesome icon creator

Ever since the advent of @font-face in CSS (supported even in Internet Explorer since version 4.), web designers have found themselves free from the constraints of specifying fallback fonts likely to appear on all operating systems. Not only has this revolutionized web-based typesetting for content and navigation, but the increasing number of web-friendly icon fonts has allowed designers to use font glyphs to replace buttons and small graphics.

This method is not without its flaws, however. While icon fonts allow total cross-browser compatibility and reduced loading times, there are a few limits on what can be done with a font icon in CSS - particularly with regard to gradients and shadowing. While flat designs can certainly benefit from icon fonts, there are a number of applications where software such as Iconion can be the better choice or can be used to supplement icon fonts.

Let's look at some of the pros and cons of using icon fonts implement icons in web design, many of which are also applicable to icons made using Iconion.

Icon fonts are all the rage in Web design due to the proliferation of free and easily-implemented web fonts. Icons based in web fonts are scalable to any screen size, work on any browser and can be given backgrounds and basic shadow effects. They save load time by allowing you to load all of the icons in a single font file, as well - essentially providing many of the benefits of sprites without using any image files.

Iconic fonts do have their limitations, and even designers who want to use web icon fonts may want to consider them as a fallback for Iconion images. The first issue is styling; while it is technically possible to apply shadows and gradients to font text, this ability is very limited and can involve huge amounts of code. If an icon needs a background or a shadow effect, you're looking at paragraphs worth of CSS vs. a few clicks in Iconion. There is also no guarantee of cross-browser compatibility with CSS shadows or gradients, and for both shadow and gradient properties you'll need to state each style at least four times to cover the majority of browsers.

If you want your icon to have a background, you're also very limited with regard to the shape of that background. The only way to give a text-based button a circular background is to give it a fixed square size in pixels, with a CSS border radius equal to half the size of the button. This negates the scaling advantage of using a symbol font in the first place, all at the cost of three extra lines of CSS. And then, of course, you have to align the symbol within the background element - which may necessitate putting a block-level element around the symbol to allow for fixed dimensions. This is a lot of code for something that can be accomplished very simply with an image icon.

The ability to add shadows to text in a web page is also quite limited. You can apply any blur and positioning you like, but cannot achieve the long drop-shadow effect so popular in modern 'retro' and flat graphics. And each shadow property must be restated multiple times for multiple browsers, leading to many long hours of tweaking. The use of an Iconion PNG icon makes it easy to use these shadows with or without a background.

The hardest part of using icon fonts in Web design, however, is making the custom icon font itself. First you have to draw the icons or download the appropriate font that just happens to have all of the images you want. If you're making the font yourself, not only do you have to draw the images but you also have to find the right software to compile them into a font - often at considerable expense. Upcoming editions of Iconion will include the ability to import the font of your choosing - icon font or otherwise.

Virtually all of the advantages of the above method can be realized using font-based icons made in Iconion, with none of the disadvantages. While loading time is a consideration, image icons tend to be rather small and broadband internet (even on mobile devices) is proliferating at an unprecedented rate. Some cities even have free broadband wi-fi networks covering entire metropolitan areas. So if a page is generally well-optimized, a few dozen kilobytes for buttons won't hurt loading time on most devices.

In most cases, image tags have virtually no styling or compatibility problems. Even in forms that call for Javascript, it's easy to implement the handlers using practically any element. Image tags retain the virtue of scalability, and for buttons scalability is also less of an issue - unlike photos, you'll never need a button to take up half of the screen on a smartphone.

With bandwidth less and less of an issue, the use of scalable images for buttons is more and more attractive. Icon fonts certainly have their place in more utilitarian designs, but if your site needs to have attractive and colorful graphics that stand out then you'll get far more utility out of Iconion and with less hassle.

Iconion allows you one-click access not only to the font glyphs, but also to shadow and gradient options that simply aren't possible in CSS and can only be approximated with paragraphs of code. You'll also get to choose from multiple types of drop shadows, gradient backgrounds, and the choice of solid or open buttons in multiple shapes. Future editions will also include the ability to import your favorite icon fonts, so that anything you see available online can be embellished through Iconion as much as you like.

Which would you rather deal with? With icon fonts you can look forward to spending hours on drawing your icons, creating a font with expensive software, writing pages of CSS and HTML to style the font, and then testing across browsers. Or you can look forward to minutes creating one unified style for your buttons, choosing the icons with one click and exporting all of them at once using Iconion.